剛?cè)肼殯]多久，給我一個(gè)微信公眾號(hào)的項(xiàng)目，之前也沒有經(jīng)驗(yàn)，今天把我開發(fā)時(shí)遇到的坑總結(jié)一下，希望可以幫助一些像我一樣的小白兔！

我的項(xiàng)目是前端H5頁面，vue項(xiàng)目，我接手的時(shí)候已經(jīng)有過微信支付功能了，我看項(xiàng)目中在public文件夾下index.html中引入了jwexin.js

接下來就是在頁面實(shí)現(xiàn)功能代碼如下：

<i @click="getInvoiceList()" :class="{noClick:isDisabled}" class="el-icon-s-operation invoiceBtn"></i>  //獲取發(fā)票抬頭按鈕

調(diào)用獲取微信配置參數(shù)接口 getwxticket

getInvoiceList(){
   this.isDisabled = true   let _this = this   let url = location.href.split('#')[0]
   getwxticket(url).then(res=>{
      let data = res.data
      wx.config({
        beta: true,//用于方法未對(duì)外公開的情況        debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來        appId: data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)        timestamp: data.timestamp, // 必填，生成簽名的時(shí)間戳        nonceStr:data.nonceStr, // 必填，生成簽名的隨機(jī)串        signature: data.signature,// 必填，簽名，見附錄1        jsApiList: [
          "chooseInvoiceTitle"        ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2      });
      wx.ready(function(){
        // config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。        _this.doReady();
      });
      wx.error(function(res){
        console.log(res,'失??！')
        _this.isDisabled = false        // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。      });
   })
                
},

發(fā)票抬頭接口

doReady () {
   let _this = this   wx.invoke('chooseInvoiceTitle', {
      "scene": "1"   }, function (res) {
      // 這里處理調(diào)用結(jié)果X``      _this.isDisabled = false      var info = JSON.parse(JSON.stringify(res)).choose_invoice_title_info;
      var infoJ = JSON.parse(JSON.parse(JSON.stringify(info)));
      _this.invoiceSave.title = infoJ.title //發(fā)票抬頭      _this.invoiceSave.taxFileNumber = infoJ.taxNumber; //稅號(hào)      _this.invoiceSave.address = infoJ.companyAddress //公司地址      _this.invoiceSave.tel = infoJ.telephone //電話      _this.invoiceSave.bankname = infoJ.bankName //開戶銀行      _this.invoiceSave.bankAccount = infoJ.bankAccount // 銀行賬號(hào)      _this.invoiceSave.titleType = infoJ.type //發(fā)票抬頭類型   })  
},

這樣寫應(yīng)該沒有問題才對(duì)，可我偏偏是個(gè)蘋果手機(jī)，怎么請(qǐng)求接口，都會(huì)返回簽名無效的錯(cuò)誤，在網(wǎng)上找了好久都沒有找到解決辦法，知道我用同事的手機(jī)測(cè)試，才發(fā)現(xiàn)同事的手機(jī)是成功的，那問題就鎖定了，是iOS系統(tǒng)的問題，順著這個(gè)問題找解決辦法，網(wǎng)上說是因?yàn)椋骸?span style="margin: 0px; padding: 0px; max-width: 100%; color: rgb(77, 77, 77); box-sizing: border-box !important; overflow-wrap: break-word !important;">微信公眾號(hào)分享功能，安卓成功，ios出現(xiàn)簽名錯(cuò)誤。區(qū)別在于發(fā)送給后臺(tái)做驗(yàn)證的url不同，安卓需要發(fā)送當(dāng)前頁面的url，ios需要發(fā)送進(jìn)入的第一個(gè)頁面的url，所以需要將第一個(gè)頁面的url保存起來”照貓畫虎同理，解決辦法：

在路由守衛(wèi)里添加如下代碼：

router.beforeEach((to, from, next) => {
  if (window.entryUrl == undefined) {
    window.entryUrl = location.href.split('#')[0]
  }
})

然后在頁面的getInvoiceList方法里添加如下代碼判斷機(jī)型：

let u= navigator.userAgent;
  let isAndroid = u.indexOf('Android')>-1||u.indexOf('Adr')>-1  if (isAndroid) {
    _this.url= Base64.encode(location.href.split('#')[0])
  }else{
     _this.url= Base64.encode(window.entryUrl)
  }