这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
最近在做安卓内嵌入H5活动页拉新活动,遇到的棘手问题记录下,
一是为了日后遇到同样问题好回顾,二是希望能帮到有同样问题的兄弟。
废话不多说,先从最棘手的问题直接开始:
一、Invalid Signature
1.因为项目内是Vue中的hash模式,所以遇到这个问题时,一直怀疑hash模式是不是不可以。——其实可以,hash和history都可以;记得 encodeURIComponent(location.href.split('#')[0])
2.按照官方文档的步骤去排查错误:
(1)确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。——这个问题主要在后台那里,要点:1.公众号后台配置ip白名单以及JS安全域名。重点:ip白名单记得要配后台线上服务器的ip,否则线上后台是拿不到asscee_token的,access_token为null时也可以参与signature的计算,很坑!!!建议让后台把access_token和jsapi_ticket返回或者让后台看看到底有没有返回值;2.记得拿公众号的APPID去计算,一定要后台亲眼去比对,APPID对不对!(2)确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。——这一步没啥好说的,自己好好检查
(3)确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分。——记得 encodeURIComponent(location.href.split('#')[0])
(4)确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
(5)确保一定缓存access_token和jsapi_ticket。
(6)确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。**——记得前端把当前页面路径(encodeURIComponent(location.href.split('#')[0]))ajax 传给后台 **
二、the permission value is offline verifying
(1)确认config正确通过。——记得在页面挂在完毕去注入JSSDK,如果有路由拦截跳转的,要跳转完毕后再去注入,要保证注入的页面url和调用分享接口的url是一模一样(encodeURIComponent(location.href.split('#')[0]))
(2)如果是在页面加载好时就调用了JSAPI,则必须写在wx.ready的回调中。——wx.ready的回调去写分享逻辑
(3)确认config的jsApiList参数包含了这个JSAPI。
三、permission denied
(1)先去微信公众平台 看看公众号没有权限使用这个JSAPI
(2)可以调用jweixin.checkJsApi,记得把debug打开,微信开发者工具和真机报的错误很大可能会不一样。引用的最新的jssdk 1.6;也用了最新的分享给好友的方法;真机 updateAppMessageShareData: true; updateTimelineShareData: true; config: ok,就是分享不了,我真是吐了,
如果遇到同样的情况,记得jsApiList加入 onMenuShareAppMessage,没错就是老版本,那个即将废弃的分享api
最后放上封装的类:
1.初始化vue时,let wx = new Wx();if(wx.isWeiXin){ Vue.prototype.wx = wx; }
2.调用时,this.wx.share(title, desc, link, imgUrl, successCallback)
3.记得改一下_initJssdk方法中请求接口config配置的api?
export class Wx { constructor (jsApiList = ['updateAppMessageShareData', 'onMenuShareAppMessage' , 'closeWindow']) { this.isWeiXin = this.isInWx() this.wxJssdkInfo = {} this.jsApiList = jsApiList } isInWx () { return navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1 ? true : false } async _initJssdk (callback) { try { let auth_url = encodeURIComponent(location.href.split('#')[0]) let params = { auth_url } this.wxJssdkInfo = await fissionApi.getWxAuth(params) jweixin.config({ debug: IS_PRO() ? false : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: this.wxJssdkInfo.app_id, // 必填,公众号的唯一标识 timestamp: this.wxJssdkInfo.timestamp, // 必填,生成签名的时间戳 nonceStr: this.wxJssdkInfo.noncestr, // 必填,生成签名的随机串 signature: this.wxJssdkInfo.signature,// 必填,签名 jsApiList: this.jsApiList // 必填,需要使用的JS接口列表 }) jweixin.error(res => console.log(res)) if (callback) { callback(this.wxJssdkInfo) } } catch (err) { console.log(err) } } share (title, desc, link, imgUrl, successCallback) { link = link || window.location.href; if(!this.isWeiXin) return this._initJssdk(() => { jweixin.ready(() => { jweixin.checkJsApi({ jsApiList: this.jsApiList, // 需要检测的JS接口列表,所有JS接口列表见附录2, success: function(res) { if (res.checkResult.updateAppMessageShareData || res.checkResult.onMenuShareAppMessage) { jweixin.onMenuShareAppMessage({ title, desc, link, imgUrl, success: res => successCallback && successCallback(res), fail: function(error) { console.log('updateAppMessageShareData error:', error); } }) jweixin.onMenuShareAppMessage({ title, desc, link, imgUrl, success: res => successCallback && successCallback(res), fail: function(error) { console.log('updateAppMessageShareData error:', error); } }) } } }) }) }) } closeH5 () { wx.closeWindow(); } }
【问题】
使用微信SDK的分享接口wx.updateAppMessageShareData时,控制台出现‘updateAppMessageShareData:fail, the permission value is offline verifying’错误提示。
【解决】
jsApiList里面声明updateAppMessageShareData方法。
示例代码如下:
wx.config({ debug: false, appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: ['updateAppMessageShareData'], });