1、绑定域名
① 微信公众平台里“公众号设置”的“功能设置”里填写“JS接口安全域名”
注:安全域名为项目访问域名,可添加二级域名。
2、引入JS
① http://res.wx.qq.com/open/js/jweixin-1.6.0.js(支持https)
注:import wx from 'weixin-js-sdk' 会报错
3、定义公共的调用方法
① 先定义类型
declare global {
interface Window {
wx: {
config: (config: unknown) => void,
checkJsApi: (config: unknown) => void,
ready: (config: unknown) => void,
updateAppMessageShareData: (config: unknown) => void,
updateTimelineShareData: (config: unknown) => void
}
}
}
3、通过config接口注入权限验证配置(debug调试失败用)
window.wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: ['updateAppMessageShareData',] // 必填,需要使用的JS接口列表
});
4、通过ready接口处理
window.wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
5、常用分享接口
updateAppMessageShareData “分享给朋友”及“分享到QQ”按钮的分享内容
updateTimelineShareData “分享到朋友圈”及“分享到QQ空间”按钮的分享内容
window.wx.ready(function () { //需在用户可能点击分享按钮前就先调用
window.wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})
});
注:1.4版本之前的wx.onMenuShareTimeline
、wx.onMenuShareAppMessage
、wx.onMenuShareQQ
、wx.onMenuShareQZone
接口,即将废弃。