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

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

接下來(lái)就是在頁(yè)面實(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ì)外公開(kāi)的情況        debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)        appId: data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)        timestamp: data.timestamp, // 必填，生成簽名的時(shí)間戳        nonceStr:data.nonceStr, // 必填，生成簽名的隨機(jī)串        signature: data.signature,// 必填，簽名，見(jiàn)附錄1        jsApiList: [
          "chooseInvoiceTitle"        ] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2      });
      wx.ready(function(){
        // config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶(hù)端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶(hù)觸發(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ù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開(kāi)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 //開(kāi)戶(hù)銀行      _this.invoiceSave.bankAccount = infoJ.bankAccount // 銀行賬號(hào)      _this.invoiceSave.titleType = infoJ.type //發(fā)票抬頭類(lèi)型   })  
},

這樣寫(xiě)應(yīng)該沒(méi)有問(wèn)題才對(duì)，可我偏偏是個(gè)蘋(píng)果手機(jī)，怎么請(qǐng)求接口，都會(huì)返回簽名無(wú)效的錯(cuò)誤，在網(wǎng)上找了好久都沒(méi)有找到解決辦法，知道我用同事的手機(jī)測(cè)試，才發(fā)現(xiàn)同事的手機(jī)是成功的，那問(wèn)題就鎖定了，是iOS系統(tǒng)的問(wèn)題，順著這個(gè)問(wèn)題找解決辦法，網(wǎng)上說(shuō)是因?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)前頁(yè)面的url，ios需要發(fā)送進(jìn)入的第一個(gè)頁(yè)面的url，所以需要將第一個(gè)頁(yè)面的url保存起來(lái)”照貓畫(huà)虎同理，解決辦法：

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

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

然后在頁(yè)面的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)
  }