JSSDK使用步骤
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
JS接口安全域名官方说法是:开发者可在该域名下调用微信开放的JS接口
[划重点]这里有注意⚠️的地方:
- 1、域名格式:如果项目域名是
https://xxx.xxx.cn
,那么安全域名就是xxx.xxx.cn
,谨记! - 2、分享链接必须在安全域名下
如果这两步没有做好,就会报invalid url domain
的错。
步骤二:引入 JS 文件
在需要调用 JS 接口的页面引入如下 JS 文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。
备注:支持使用 AMD/CMD 标准模块加载方法加载
步骤三:通过 config 接口注入权限验证配置
所有需要使用 JS-SDK 的页面必须先注入配置信息,否则将无法调用
wx.config({
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的 JS 接口列表
});
其中appId
, timestamp
, nonceStr
, signature
需从后台获取。
[划重点]这里有注意⚠️的地方:
- 获取
appId
,timestamp
,nonceStr
,signature
这些参数时,需要分享路径作为参数,这个路径要和分享之后访问的路径一样,所以需要去掉微信增加的额外参数,即:
const url = window.location.href.split('#')[0]
获取签名如果没处理好,就会报invalid signature
的错误。
分享接口
请注意,原有的 wx.onMenuShareTimeline
、wx.onMenuShareAppMessage
、wx.onMenuShareQQ
、wx.onMenuShareQZone
接口,即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData
、wx.updateTimelineShareData
接口。
自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})
});
自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容(1.4.0)
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.updateTimelineShareData({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})
});
完整参考代码
const { title, desc, thumb } = this.state.playDetailInfo // 代码的其他部分获取的参数
const url = window.location.href.split('#')[0]
console.log('url :>> ', url, title, desc)
const link = window.location.href
const imgUrl = thumb || Global.logoUrl
commonActions.getWxShare({ url }).then(res => {
console.log('weixin分享res :>> ', res)
if (res.code === 200 && res.data) {
const { appId, timestamp, nonceStr, signature } = res.data
window.wx.config({
debug: false, // 是否开启debug模式,如果开启,每次回调有内容会alert出信息
appId, // 后端返回的公众平台appid
timestamp, // 后端返回的时间戳
nonceStr, // 后端返回的随机字符串
signature, // 后端返回的签名
jsApiList: [ // 需要调用的jsApi
'updateTimelineShareData',//分享到朋友圈
'updateAppMessageShareData',//分享给微信好友
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
})
window.wx.ready(() => { //需在用户可能点击分享按钮前就先调用
// config信息验证后会执行 ready 方法,所有接口调用都必须在 config 接口获得结果之后,
// config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在 ready 函数中调用来确保正确执行。
// 对于用户触发时才调用的接口,则可以直接调用,不需要放在 ready 函数中。
// 分享给朋友
window.wx.updateAppMessageShareData({
title, // 分享标题
desc, // 分享描述
link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl, // 分享图标
success: function () {
// 设置成功
}
})
// 分享到朋友圈
window.wx.updateTimelineShareData({
title, // 分享标题
link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
imgUrl, // 分享图标
success: function () {
// 设置成功
}
})
})
window.wx.error(res => {
// config信息验证失败会执行 error 函数,如签名过期导致验证失败,具体错误信息可以打开 config 的debug模式查看,也可以在返回的 res 参数中查看,对于 SPA 可以在这里更新签名。
console.log('window.wx.error :>> ', res)
})
}
}).catch(err => {
console.log('weixin分享error :>> ', err)
})