使用微信JS-SDK之config注入踩坑记录以及promise封装

使用微信JS-SDK之config注入踩坑记录以及promise封装

微信 JS-SDK 是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

具体的使用步骤,可参考:微信开发文档

在使用JS-SDK能力前,需要先通过 config 接口注入权限验证配置。如下是config接口注入的核心代码。

const initWxSdk = function () {
  const wx = window.wx
  const jsApiList = ['checkJsApi', 'scanQRCode','closeWindow']
  return apiSurvey
    .getJsTicket({
      url: location.href.split('#')[0],
    })
    .then(async (response) => {
      let result = response.data
      if (result.code === 0) {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
          appId: 'xxxxxxxxxxxx', // 必填,公众号的唯一标识
          timestamp: Number(result.data.timestamp), // 必填,生成签名的时间戳
          nonceStr: result.data.nonceStr, // 必填,生成签名的随机串
          signature: result.data.signature, // 必填,签名
          jsApiList// 必填,需要使用的JS接口列表
        })
        // console.log('getJsTicket')

        let isConfigOk = true
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
        // wx.hideAllNonBaseMenuItem() // 隐藏所有非基础按钮
        wx.ready(function () {
          isConfigOk = true
          console.log('initWxSdk ready', result)
        })

        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。        
        wx.error(function (res) {
          isConfigOk = false
          console.error('initWxSdk error', res)
          alert(res.err_msg)
          if (res.errMsg.indexOf('function not exist') > -1) {
            alert('版本过低请升级')
          }
        })

        //这里为什么要等200ms,因为wx.error和wx.ready是异步的,而wx.ready无论失败还是成功都会进入,因此给个合适的延时确保他们都有执行
        await new Promise((resolve) => {
          setTimeout(() => {
            resolve()
          }, 200);
        })

        isConfigOk ? Promise.resolve() : Promise.reject()
      }
    })
}

重点来了,wx.ready和wx.error都是异步的。更重点的是wx.ready无论config接口注入是否成功,都会进入。注意看下图官方的描述。

因此,直接简单的使用promise,wx.ready使用resolve,wx.error使用reject是不行的。因此,我想到的是使用延时,等wx.ready和wx.error执行完在resolve和reject。经过测试,给个适当的200ms延时。

或许也有开发想到了,可以使用success和fail来处理config成功和失败。毕竟官方也有说明。然而wx.config实际是不支持success和fail的。

所有接口通过 wx 对象(也可使用 jWeixin 对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:

  1. success:接口调用成功时执行的回调函数。
  2. fail:接口调用失败时执行的回调函数。
  3. complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
  4. cancel:用户点击取消时的回调函数,仅部分有用户取消操作的 api 才会用到。
  5. trigger: 监听 Menu 中的按钮点击时触发的方法,该方法仅支持 Menu 中的相关接口。

官方的常见错误及解决方法:点击查看,滑到最底部。

发表评论