微信公众号调用发票抬头接口总结

刚入职没多久，给我一个微信公众号的项目，之前也没有经验，今天把我开发时遇到的坑总结一下，希望可以帮助一些像我一样的小白兔！

我的项目是前端H5页面，vue项目，我接手的时候已经有过微信支付功能了，我看项目中在public文件夹下index.html中引入了jwexin.js

接下来就是在页面实现功能代码如下：

<i @click="getInvoiceList()" :class="{noClick:isDisabled}" class="el-icon-s-operation invoiceBtn"></i>  //获取发票抬头按钮

调用获取微信配置参数接口 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, // 开启调试模式,调用的所有api的返回值会在客户端alert出来        appId: data.appId, // 必填，公众号的唯一标识        timestamp: data.timestamp, // 必填，生成签名的时间戳        nonceStr:data.nonceStr, // 必填，生成签名的随机串        signature: data.signature,// 必填，签名，见附录1        jsApiList: [
          "chooseInvoiceTitle"        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2      });
      wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。        _this.doReady();
      });
      wx.error(function(res){
        console.log(res,'失败！')
        _this.isDisabled = false        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。      });
   })
                
},

发票抬头接口

doReady () {
   let _this = this   wx.invoke('chooseInvoiceTitle', {
      "scene": "1"   }, function (res) {
      // 这里处理调用结果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 //发票抬头      _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 //发票抬头类型   })  
},

这样写应该没有问题才对，可我偏偏是个苹果手机，怎么请求接口，都会返回签名无效的错误，在网上找了好久都没有找到解决办法，知道我用同事的手机测试，才发现同事的手机是成功的，那问题就锁定了，是iOS系统的问题，顺着这个问题找解决办法，网上说是因为：“微信公众号分享功能，安卓成功，ios出现签名错误。区别在于发送给后台做验证的url不同，安卓需要发送当前页面的url，ios需要发送进入的第一个页面的url，所以需要将第一个页面的url保存起来”照猫画虎同理，解决办法：

在路由守卫里添加如下代码：

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

分享到微信