vue开发h5 公众号

公众号

搭建公众号的时候也是在过程中遇到了很多的坑，一路踩过来也算是把完成的差不多了，就想着写个记录一下自己的坑。

公众号配置

要使用公众号的一些内置接口肯定是要配置公众号的接口返回域名的，
在官方文档配置就可以啦，没有域名的也可以使用花生壳做代理。这个在后面注册wxconfig有用。

配置注册wxconfig

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});
 getSignature({ companyNo: '3211231231234567', url: store.state.page.initLink }).then(res => {
        if (res.data.appid) {
          wx.config({
            debug: true,
            appId: res.data.appid,
            timestamp: res.data.timestamp,
            nonceStr: res.data.noncestr,
            signature: res.data.signature,
            jsApiList: apiList
          })
          wx.ready(res => {
            // 微信SDK准备就绪后执行的回调。

            resolve(wx, res)
          })

这个签名信息最开始以为是我前端生成的，后面仔细阅读文档之后才发现是调用的后端的请求返回的数据。前端只需要把当前页面的地址url传过去就可以啦，不能包含#号，在微信公众号不能被识别，所以vue中使用hash的要处理一下#。在进入微信公众号的时候获取的window.location.href的地址处理一下就可以啦。

sessionStorage.setItem('initLink',location.href.split('?')[0])

调用一下之前封装的微信注册的方法就可以啦

wechatUtil
          .init([
            'chooseWXPay'
          ])
          .then((wx, res) => {
            if (!response.data.sdk_noncestr) {
              Toast(response.data.result_msg)
              return
            }
            wx.chooseWXPay({
              timestamp: response.data.sdk_timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: response.data.sdk_noncestr, // 支付签名随机串，不长于 32 位
              package: response.data.sdk_package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              signType: response.data.sdk_signtype, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
              paySign: response.data.sdk_paysign, // 支付签名
              success: function(res) {
                // 支付成功后的回调函数
                alert('支付成功')
              }
            })
          })
      })

注册成功，如果你开启了debug模式微信会返回一个
提示这个就证明wxconfig注册成功。就可以使用微信提供的接口了。