[微信公众号开发][设备坑] 微信SDK授权 invalid signature以及封装
前言
公众号项目开发,做微信授权的时候,在测试的时候是直接调用页面链接授权,直接弹出。但是从首页进入却调不出,进而搜索发现是微信SDK授权报错。
百度了一下类似的文章: https://blog.csdn.net/skyblacktoday/article/details/88344096
原因
由于在ios和android中,location.href在spa页面的机制不同(不同在于ios是只要不刷新页面,href就不会改变)。所以ios获得的url并不是配置需要的url
解决
苹果只需要配置一次,之后直接调用即可
安卓需要每次使用微信SDK都配置
初版封装好的代码:
wx.js
import wx from 'weixin-js-sdk' class Wx { static instance static getInstance() { if (!Wx.instance) { Wx.instance = new Wx() } return Wx.instance } constructor() { this.wx = wx this.isConfig = false this.configOptions = { debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: undefined, // 必填,公众号的唯一标识 timestamp: undefined, // 必填,生成签名的时间戳 nonceStr: undefined, // 必填,生成签名的随机串 signature: undefined, // 必填,签名 jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填,需要使用的JS接口列表 } } isIos() { const u = navigator.userAgent // const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 //安卓 return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端 } isNeedConfig() { return !(this.isIos() && this.isConfig) } /* * debug 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 * appId 必填,公众号的唯一标识 * timestamp 必填,生成签名的时间戳 * nonceStr 必填,生成签名的随机串 * signature 必填,签名 * jsApiList 必填,需要使用的JS接口列表 * */ config(options) { return new Promise((resolve, reject) => { // ios系统一次会话只需要配置一次 // console.log('是否ios操作系统', this.isIos()) // console.log('是否配置', this.isConfig) if (!this.isNeedConfig()) { resolve() } else { this.wx.config(options) this.wx.ready(() => { if (this.isIos()) { this.isConfig = true } resolve() }) this.wx.error((err) => { reject(err.errMsg) }) } }) } share(options) { this.wx.onMenuShareTimeline(options) this.wx.onMenuShareAppMessage(options) this.wx.onMenuShareQQ(options) this.wx.onMenuShareWeibo(options) } hideMenuItems(menuList) { this.wx.hideMenuItems({ menuList }) } } export default Wx
代理调用(接口调用仅供参考
import Wx from './wx' import api from '@/api' const wx = Wx.getInstance() function config() { return new Promise((resolve, reject) => { if (!wx.isNeedConfig()) { resolve() } else { api.main.wechatConfig({ url: window.location.href }).then((res) => { const { appId, signature, timestamp, nonceStr } = res const jsApiList = [ 'onMenuShareWeibo', 'onMenuShareQZone', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'onVoicePlayEnd', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'translateVoice', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ' ] return wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: appId, // 必填,公众号的唯一标识 timestamp: timestamp, // 必填,生成签名的时间戳 nonceStr: nonceStr, // 必填,生成签名的随机串 signature: signature, // 必填,签名 jsApiList: jsApiList // 必填,需要使用的JS接口列表 }) }).then(() => { resolve() }).catch((err) => { // reject(err) console.log(err) }) } }) } /* * title = '', // 分享标题 * desc = '', // 分享描述 * link = '', // 分享链接 * imgUrl = '' // 分享图标 * */ export function share(options) { config().then(() => { // console.log('wx-utils', options) wx.share(options) }) } /** * 隐藏右上角的菜单栏目 * @param menuList 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有menu项见sdk附录3 */ export function hideMenuItems(menuList) { config().then(() => { // console.log('wx-utils', menuList) wx.hideMenuItems(menuList) }) } const install = (Vue) => { Vue.prototype.$wx = { share, hideMenuItems } } export default { install }
前端远比想象中的还要复杂,需要学习的还有很多,脚踏实地记录好遇到的麻烦与经验,三省吾身,才能慢慢积累经验。