最近在做安卓?jī)?nèi)嵌入H5活動(dòng)頁(yè)拉新活動(dòng)惰聂，遇到的棘手問(wèn)題記錄下，

一是為了日后遇到同樣問(wèn)題好回顧咱筛，二是希望能幫到有同樣問(wèn)題的同學(xué)搓幌。

廢話不多說(shuō)，先從最棘手的問(wèn)題直接開(kāi)始：

一迅箩、Invalid Signature

1.因?yàn)轫?xiàng)目?jī)?nèi)是Vue中的hash模式溉愁，所以遇到這個(gè)問(wèn)題時(shí)，一直懷疑hash模式是不是不可以饲趋」战遥——其實(shí)可以，hash和history都可以奕塑；記得 encodeURIComponent(location.href.split('#')[0])

2.按照官方文檔的步驟去排查錯(cuò)誤：
（1）確認(rèn)簽名算法正確堂污，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁(yè)面工具進(jìn)行校驗(yàn)。——這個(gè)問(wèn)題主要在后臺(tái)那里爵川，要點(diǎn)：1.公眾號(hào)后臺(tái)配置ip白名單以及JS安全域名敷鸦。重點(diǎn)：ip白名單記得要配后臺(tái)線上服務(wù)器的ip，否則線上后臺(tái)是拿不到asscee_token的，access_token為null時(shí)也可以參與signature的計(jì)算扒披，很坑Ｖ狄馈！碟案！建議讓后臺(tái)把a(bǔ)ccess_token和jsapi_ticket返回或者讓后臺(tái)看看到底有沒(méi)有返回值愿险；2.記得拿公眾號(hào)的APPID去計(jì)算，一定要后臺(tái)親眼去比對(duì)价说，APPID對(duì)不對(duì)辆亏！（2）確認(rèn)config中nonceStr（js中駝峰標(biāo)準(zhǔn)大寫(xiě)S）, timestamp與用以簽名中的對(duì)應(yīng)noncestr, timestamp一致。——這一步?jīng)]啥好說(shuō)的鳖目，自己好好檢查

（3）確認(rèn)url是頁(yè)面完整的url(請(qǐng)?jiān)诋?dāng)前頁(yè)面alert(location.href.split('#')[0])確認(rèn))扮叨，包括'http(s)://'部分，以及'领迈？'后面的GET參數(shù)部分,但不包括'#'hash后面的部分彻磁。——記得 encodeURIComponent(location.href.split('#')[0])

（4）確認(rèn) config 中的 appid 與用來(lái)獲取 jsapi_ticket 的 appid 一致。

（5）確保一定緩存access_token和jsapi_ticket狸捅。

（6）確保你獲取用來(lái)簽名的url是動(dòng)態(tài)獲取的衷蜓，動(dòng)態(tài)頁(yè)面可參見(jiàn)實(shí)例代碼中php的實(shí)現(xiàn)方式。如果是html的靜態(tài)頁(yè)面在前端通過(guò)ajax將url傳到后臺(tái)簽名尘喝，前端需要用js獲取當(dāng)前頁(yè)面除去'#'hash部分的鏈接（可用location.href.split('#')[0]獲取,而且需要encodeURIComponent）磁浇，因?yàn)轫?yè)面一旦分享，微信客戶端會(huì)在你的鏈接末尾加入其它參數(shù)朽褪，如果不是動(dòng)態(tài)獲取當(dāng)前鏈接置吓，將導(dǎo)致分享后的頁(yè)面簽名失敗。**——記得前端把當(dāng)前頁(yè)面路徑（encodeURIComponent(location.href.split('#')[0])）ajax 傳給后臺(tái) **

二鞍匾、the permission value is offline verifying

（1）確認(rèn)config正確通過(guò)交洗。——記得在頁(yè)面掛在完畢去注入JSSDK，如果有路由攔截跳轉(zhuǎn)的橡淑，要跳轉(zhuǎn)完畢后再去注入构拳，要保證注入的頁(yè)面url和調(diào)用分享接口的url是一模一樣（encodeURIComponent(location.href.split('#')[0])）

（2）如果是在頁(yè)面加載好時(shí)就調(diào)用了JSAPI，則必須寫(xiě)在wx.ready的回調(diào)中梁棠。——wx.ready的回調(diào)去寫(xiě)分享邏輯

（3）確認(rèn)config的jsApiList參數(shù)包含了這個(gè)JSAPI置森。

三、permission denied

（1）先去微信公眾平臺(tái) 看看公眾號(hào)沒(méi)有權(quán)限使用這個(gè)JSAPI

（2）可以調(diào)用jweixin.checkJsApi符糊，記得把debug打開(kāi)凫海，微信開(kāi)發(fā)者工具和真機(jī)報(bào)的錯(cuò)誤很大可能會(huì)不一樣。引用的最新的jssdk 1.6男娄；也用了最新的分享給好友的方法行贪；真機(jī) updateAppMessageShareData: true; updateTimelineShareData: true; config: ok漾稀，就是分享不了，我真是吐了建瘫，

如果遇到同樣的情況崭捍，記得jsApiList加入 onMenuShareAppMessage，沒(méi)錯(cuò)就是老版本啰脚，那個(gè)即將廢棄的分享api

最后放上封裝的類：
1.初始化vue時(shí)殷蛇，let wx = new Wx()；if(wx.isWeiXin){ Vue.prototype.wx = wx; }
2.調(diào)用時(shí)橄浓，this.wx.share(title, desc, link, imgUrl, successCallback)
3.記得改一下_initJssdk方法中請(qǐng)求接口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, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)粒梦，若要查看傳入的參數(shù)，可以在pc端打開(kāi)荸实，參數(shù)信息會(huì)通過(guò)log打出匀们，僅在pc端時(shí)才會(huì)打印。
        appId: this.wxJssdkInfo.app_id, // 必填准给，公眾號(hào)的唯一標(biāo)識(shí)
        timestamp: this.wxJssdkInfo.timestamp, // 必填昼蛀，生成簽名的時(shí)間戳
        nonceStr: this.wxJssdkInfo.noncestr, // 必填，生成簽名的隨機(jī)串
        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, // 需要檢測(cè)的JS接口列表仇哆，所有JS接口列表見(jiàn)附錄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();
  }
}