使用微信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 中的相关接口。

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

Post Views: 22

发表评论