最近在做安卓内嵌入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();
}
}
