在企业微信或者微信应用开发中,通常会使用到微信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()
}