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

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

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

這樣寫應(yīng)該沒有問題才對，可我偏偏是個蘋果手機，怎么請求接口，都會返回簽名無效的錯誤，在網(wǎng)上找了好久都沒有找到解決辦法，知道我用同事的手機測試，才發(fā)現(xiàn)同事的手機是成功的，那問題就鎖定了，是iOS系統(tǒng)的問題，順著這個問題找解決辦法，網(wǎng)上說是因為：“微信公眾號分享功能，安卓成功，ios出現(xiàn)簽名錯誤。區(qū)別在于發(fā)送給后臺做驗證的url不同，安卓需要發(fā)送當(dāng)前頁面的url，ios需要發(fā)送進(jìn)入的第一個頁面的url，所以需要將第一個頁面的url保存起來”照貓畫虎同理，解決辦法：

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

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

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

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)
  }

分享到微信