微信 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 对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:
- success:接口调用成功时执行的回调函数。
- fail:接口调用失败时执行的回调函数。
- complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
- cancel:用户点击取消时的回调函数,仅部分有用户取消操作的 api 才会用到。
- trigger: 监听 Menu 中的按钮点击时触发的方法,该方法仅支持 Menu 中的相关接口。
官方的常见错误及解决方法:点击查看,滑到最底部。
发表评论