1、安装 weixin-js-sdk 包
npm install weixin-js-sdk --save
2、配置js接口安全域名
1、登录微公号后台
2、公众号设置-功能设置-js接口安全域名,添加要分享的域名
注意:添加域名,需要下载 域名验证文件 放到域名指定的web服务器
3、页面注入权限验证配置
1、页面引入 JS-SDK
import wx from 'weixin-js-sdk'
2、注入权限验证、设置分享
点击查看微信官方文档
请注意,原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口,即将废弃。请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。
注意:权限验证信息调用后台获取,需要传一个当 页面url 的参数给后台,安卓与ios存在差异;
安卓:地址会根据路由实时改变,所以传入url为 window.location.href;
ios:地址不会根据路由而改变,所以传入url为 首次进入系统的url,首次进入就要存储url地址;
报错 invalid signature:很可能就是url的问题
路由为hash模式,需要去掉 url地址中的 #
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'showMenuItems'] // 必填,需要使用的JS接口列表
});
//通过ready处理成功验证
wx.ready(res=>{
//设置显示按钮
wx.showMenuItems({
menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:qq', 'menuItem:share:QZone']
});
//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
wx.updateAppMessageShareData({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})
//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
wx.updateTimelineShareData({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
}
})
})