微信JS-SDK初始化封装

微信JS-SDK初始化封装

在企业微信或者微信应用开发中,通常会使用到微信jssdk能力,比如地理定位、扫一扫等。在调用这些能力之前,需要初始化。

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

一、初始化微信JS-SDK函数封装

const wx = window.wx
const jsApiList = ['checkJsApi', 'scanQRCode','closeWindow']
/**
 * 初始化微信JS-SDK
 * getJsTicket 为获取JSSDK签名接口
 * @returns Promise
 */
export const initWxSdk = function () {
  return 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: 'wwxxxxxxxxxxxxxx', // 必填,公众号的唯一标识
          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()
      }
    })
}

二、来个使用示例

// 关闭微信窗口
async closeWin(){
      await initWxSdk()
      window.wx.closeWindow() 
    }

官方文档: 微信网页开发 / JS-SDK说明文档 (qq.com)

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注