我们要做H5的活动页面，但是运营想要把这个活动分享到微信中去，所以需要我们在微信打开这个活动连接时，可以用微信的分享功能
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”
代码封装：
1、引入小程序SDK
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
2、通过config去注入权限验证配置
* @Description: * @Author: @[lina] * @Date: 2020-06-05 14:51:47 * @LastEditors: @[lina] * @LastEditTime: 2020-06-23 14:22:02 */const setWechatConfig = () => { const _this = this if (window.navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) { // 判断是微信的话再做 axios.post('wechat/getUrlConfig', { url: window.location.href.split('#')[0] }).then(res => { // 通过接口返回公众号的appID,等需要的信息 if (res.code === 200) { wx.config({ // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 debug: false, // 必填，公众号的唯一标识 appId: res.result.appId, // 必填，生成签名的时间戳 timestamp: res.result.timestamp, // 必填，生成签名的随机串 nonceStr: res.result.nonceStr, // 必填，签名 signature: res.result.signature, // 必填，需要使用的JS接口列表 jsApiList: ['hideOptionMenu', 'hideMenuItems', 'showMenuItems', 'updateAppMessageShareData', 'updateTimelineShareData'] // ['hideOptionMenu', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems', 'showMenuItems'] }) wx.error(function (res) { _this.$refs.Errormes.ErrormesFun(`调用分享功能失败 ${res}`) }) // wx.ready(function () { // // 隐藏分享功能 // wx.hideMenuItems({ // menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:QZone', 'menuItem:share:qq'] // }) // }) } }) }}export default setWechatConfig
3、通过ready接口处理成功验证
if (shareData.isShare) { wx.showMenuItems({ menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline'] }) wx.updateAppMessageShareData({ title: shareData.shareTitle, // 分享标题 desc: '点击了解活动详情', // 分享描述 link: url + '?userId=' + userId + '&from=wechat', // 分享链接，该链接域名或路径与当前页面对应的公众号JS安全域名一致 imgUrl: shareData.shareImgUrl, // 分享图标 success: function () { // 设置成功 console.log('成功') } }) wx.updateTimelineShareData({ title: shareData.shareTitle, // 分享标题this.activityInfo.shareTitle link: url + '?userId=' + userId + '&from=wechat', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: shareData.shareImgUrl, // 分享图标 success: function () { // 设置成功 console.log('成功1') } }) } })
4、通过error接口处理失败验证
wx.error(function(res){ console.log(res) //输出错误信息});