H5页面 微信授权 ＋ 微信签名 + 注意事项

一、提示只能在微信客户端打开H5

若需要微信授权获取用户的信息以及微信签名，则需要用户在微信客户端打开H5

在main.js中拦截

wxTips 组件

<template><div id="app"><div class="wx-tips-image"><img :src="tipsImgUrl" alt=""></div><div class="wx-tips-text"><h4>请在微信客户端打开链接</h4></div></div>
</template><script>
import config from '@/config/'
const tipsImgUrl = `${config.publicPath}wx-common-images/wx-tips.png`
export default {name: 'wxTips',data () {return {tipsImgUrl}},mounted () {},methods: {}
}
</script><style scoped>
#app {padding-top: 36PX;line-height: 1.6;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;background: #fff;width: 100vw;height: 100vh;position: fixed;left: 0;top: 0;z-index: 999;overflow: hidden;box-sizing: border-box;
}
.wx-tips-image{text-align: center;margin-bottom: 30PX;
}
.wx-tips-image > img {width: 110PX;height: 110PX;
}
.wx-tips-text {text-align: center;
}
.wx-tips-text > h4 {margin-bottom: 5PX;font-weight: 400;font-size: 20PX;
}
</style>

import wxTips from '@/components/wxTips'
import { screenDirectionChangeTips, browser, getUrlParam } from '@/utils/utils'let isWeixin = getUrlParam('isWeixin') || browser.versions.weixinif (isWeixin) {// 竖屏横屏提醒screenDirectionChangeTips(() => {// 竖屏状态document.querySelector('#screen-direction-tips').style.display = 'none'}, () => {// 横屏状态document.querySelector('#screen-direction-tips').style.display = 'block'})// 微信网页授权登录console.log('微信环境')// 本地调试 ---slet token = getUrlParam('token')if (token) {// 设置tokenlocalStorage.setItem('InternalPurchase_TOKEN', token)}// 本地调试 ---e// 微信登录 根据自己的业务场景来xtsMpLogin().then(wxLoginRes => {if (wxLoginRes === 'code success') {// 没有token，留在当前页，填写信息获取tokennew Vue({render: h => h(App)}).$mount('#app')} else {// 有token,标明已经登录及完成信息，跳转到个人信息页面const publicPath = config.ENV === 'prod' ? '/xx/' : '/xxx/'let url = `${window.location.origin}/${publicPath}/xxx.html?recommendCode=${getUrlParam('xxx') || ''}&enterpriseCode=${getUrlParam('xxx') || ''}`window.location.href = url}})
} else {// 非微信环境提示console.log('非微信环境')new Vue({render: h => h(wxTips)}).$mount('#app')
}

 

二、微信授权登录

参考微信开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

当前是否存在code，不存在则调用微信公众号网页授权登录换取code，并保存在本地；

存在则说明已登录过

// 微信公众号网页授权登陆换取code
const $wxLogin = () => {const appId = ''const currentUrl = encodeURIComponent(location.href.split('#')[0])const wxAuthorizeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${currentUrl}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`window.location.href = wxAuthorizeUrl
}

// 获取登陆token
const xtsMpLogin = () => {return new Promise((resolve, reject) => {let token = localStorage.getItem('TOKEN') || ''if (!token) {const code = getUrlParam('code') || localStorage.getItem('CODE') || ''if (!code) {$wxLogin()} else {// 设置code-localStorage.setItem('CODE', code)resolve('code success')// let params = {//   code// }// // console.log('后台微信登录参数:', params)// $get('/xxx', params).then(res => {//   console.log('loginUrl获取token：', res)//   let { code, data } = res//   if (code === 0) {//     let token = data//     // 设置token//     localStorage.setItem('TOKEN', token)//     // 删除微信返回code 重新跳转url//     let paramObj = parseUrlParamToObj()//     delete paramObj['code']//     delete paramObj['state']//     // resolve('wxLogin auth')//     window.location.replace(parseUrlParamToStr(paramObj))//     // resolve('wxLogin success')//   } else {//     console.log(`接口报错`)//   }// })}} else {// 授权过没过期 根据自己的业务场景来console.log('微信网页授权,本地有token')resolve('hasTokenNow')}})
}

 

三、VUE移动端使用vConsole的调试工具

安装：

npm install vconsole

在main.js中引入：

仅在开发和测试环境可打开调试

import Vconsole from 'vconsole'
if (process.env.NODE_ENV === 'development') {let vConsole = new Vconsole()Vue.use(vConsole)
}

 

四、微信分享签名

参考微信开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

微信签名封装：

微信公众号获取签名信息封装：

// 微信公众号获取签名信息
const fetchWXSignature = () => {let url = location.href.split('#')[0]return new Promise((resolve, reject) => {$post('/wechat/jsapi/ticket/createJsapiSignature', { url }).then(res => {console.log('微信签名信息：', res)let { code, data } = resif (code === 0) {$wxConfig(data)resolve(`wxConfig:success`)} else {reject(res)}}).catch(err => {reject(err)})})
}

微信公众号签名配置：

// 微信公众号签名配置
const $wxConfig = serverJson => {console.log(`serverJson:`, serverJson)let { appId, timestamp, nonceStr, signature } = serverJsonwx.config({debug: false,appId: appId, // 必填，公众号的唯一标识timestamp: timestamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature: signature, // 必填，签名，见附录1jsApiList: [// 必填，需要使用的JS接口列表，所有JS接口列表见附录2'checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone','hideMenuItems','showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem','translateVoice','startRecord','stopRecord','onVoiceRecordEnd','playVoice','onVoicePlayEnd','pauseVoice','stopVoice','uploadVoice','downloadVoice','chooseImage','previewImage','uploadImage','downloadImage','getNetworkType','openLocation','getLocation','hideOptionMenu','showOptionMenu','closeWindow','scanQRCode','chooseWXPay','openProductSpecificView','addCard','chooseCard','openCard']})
}

微信公众号分享配置：

// 微信公众号分享配置
const $wxShareConfig = shareJson => {console.log(`shareJson:`, shareJson)let { title, desc, link, imgUrl, type = 'link' } = shareJsonwx.ready(function () {// 分享给朋友 及 分享到QQwx.updateAppMessageShareData({// 分享设置title: title, // 分享标题desc: desc, // 分享描述link: link, // 分享链接imgUrl: imgUrl // 分享图标},function () {})// 分享到朋友圈 及 分享到QQ空间wx.updateTimelineShareData({title: title, // 分享标题link: desc, // 分享链接imgUrl: imgUrl // 分享图标},function () {})// 以下是旧版// 分享给朋友wx.onMenuShareAppMessage({title: title, // 分享标题desc: desc, // 分享描述link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: imgUrl, // 分享图标type: type, // 分享类型,music、video或link，不填默认为linkdataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空success: function () {// 用户点击了分享后执行的回调函数}})// 分享到朋友圈wx.onMenuShareTimeline({title: title, // 分享标题link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: imgUrl, // 分享图标success: function () {// 用户点击了分享后执行的回调函数}})// 分享到QQwx.onMenuShareQQ({title: title, // 分享标题desc: desc, // 分享描述link: link, // 分享链接imgUrl: imgUrl, // 分享图标success: function () {// 用户确认分享后执行的回调函数},cancel: function () {// 用户取消分享后执行的回调函数}})// 分享到QQ空间wx.onMenuShareQZone({title: title, // 分享标题desc: desc, // 分享描述link: link, // 分享链接imgUrl: imgUrl, // 分享图标success: function () {// 用户确认分享后执行的回调函数},cancel: function () {// 用户取消分享后执行的回调函数}})})
}

流程如下：

import { fetchWXSignature, $wxShareConfig } from '@/utils/wxUtils'

  created () {this.wxInitSettingConfig()},

    // 微信配置wxInitSettingConfig () {const publicPath = config.ENV === 'prod' ? '/xxx/' : '/xx/'let link = `${window.location.origin}/${publicPath}/xxx.html}`let shareConfig = {title: `标题`,desc: `描述`,link,imgUrl: ``}fetchWXSignature().then(res => {$wxShareConfig(shareConfig)}).catch(err => {console.log('后台返回微信签名失败', err)})},

 

五、微信公众号微信支付封装

// 微信公公众微信支付
const $wxPay = wxPayParams => {/* eslint-disable-next-line */let { timeStamp, nonceStr, package_wxa, signType, sign } = wxPayParamsreturn new Promise((resolve, reject) => {wx.chooseWXPay({timestamp: timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符nonceStr, // 支付签名随机串，不长于 32 位package: package_wxa, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'paySign: sign, // 支付签名success: res => {// 支付成功后的回调函数if (res.errMsg === 'chooseWXPay:ok') {resolve(res)} else {reject(res)}},fail: err => {// 支付失败后的回调函数reject(err)},cancel: cancelRes => {reject(cancelRes)}})})
}

六、适配大屏手机，更改背景图

<style>html,body {position: relative;width: 100%;height: 100%;background:#12a751;
}#app {max-width: 750PX;min-width: 320PX;width: 100%;margin: 0 auto;-webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */height: 100%;min-height: 1040px; /* 背景图片的高度 */background: url("") no-repeat top  center / contain;overflow: hidden;
}</style>

兼容样式：

/* 兼容样式 */
<style scoped>
@media only screen and (min-device-height: 737px) and (-webkit-min-device-pixel-ratio: 2.5) {#app {min-height: 1140px;background: url("") no-repeat top  center  / contain;}}
</style>