微信 H5 JSSDK 配置注入
安装 weixin-js-sdk、后台换取签名并注入 config,兼容 iOS 的 url 处理。
vue hash 模式
具体注意事项查看官方文档
- 先到公众号的基本开发配置,设置js接口安全域名(单域名就好,不带协议,不带路径)
- 安装 weixin-js-sdk 包
- 命令
npm install weixin-js-sdk
- 命令
- 引入包、配置注入sdk
- 注入成功
配置代码
import wx from './weixin-js-sdk';
const SDK_DEBUG = false;
let SDK_config = jsApiList => {
return new Promise((rs,rj)=>{
_getConfigSign(_get_url_compatible_ios_config()) // 后台获取签名等其他配置信息/
.then(res=>{
wx.config({
debug:SDK_DEBUG, // 开启调试模式,调用的所有api的返回值会在客户端alert出来 bol
appId:res.appId, // 必填,公众号的唯一标识 str
timestamp:res.timestamp, // 必填,生成签名的时间戳 str
nonceStr:res.nonceStr, // 必填,生成签名的随机串 str
signature:res.signature, // 必填,签名 str
jsApiList:[...jsApiList], // 必填,需要使用的JS接口列表 arr
})
wx.ready(function(e){
console.log('ready:',JSON.stringify(e));
rs(e);
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
wx.error(function(err){
console.warn('js-sdk配置失败-->',JSON.stringify(err));
rj(err);
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
})
})
}
//后台请求获取js-sdk 配置信息 //签名/时间等
function _getConfigSign(url){ // 获取当前地址进行生成签名
return ServerData.sdk_config({url})
.then(e=>{
if(e.code == 0){
return e.data
}else{
console.warn('获取签名失败'+JSON.stringify(e))
return Promise.reject(e);
}
})
}
//url处理/兼容ios 注入 sdk 出现签名失败
function _get_url_compatible_ios_config(){
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid)return location.href;
if (isIOS)return location.href.split('#')[0]; //hash后面的部分如果带上ios中config会不对
return location.href
}
注:
- config注入尽量避免并发,会出现兼容问题。
- 每次url变化之后都需要重新微信jssdk授权,要用到的页面,mounted 调用config注册sdk。
- ios签名入参的时候url路径不能含有'#'hash部分。
- 设置分享,链接中存在中文,进行encodeURIComponent(),安卓手机会自动encodeURIComponent,ios不会。
- 注意大小写nonceStr。
速查
# 安装微信 JS-SDK
npm install weixin-js-sdk
| 场景 | 易错点 |
|---|---|
| iOS 签名失败 | 参与签名的 URL 不能带 # 之后的 hash |
| 注入报错 | config 避免并发;url 变化后需重新注入 |
| 分享链接带中文 | 先 encodeURIComponent() 再传(Android 会自动编码,iOS 不会) |
相关
- 微信 H5 分享设置:菜单分享内容自定义
- 微信 H5 调起微信支付:
chooseWXPay