H5如何调用小程序分享 微信SDK

我们要做H5的活动页面，但是运营想要把这个活动分享到微信中去，所以需要我们在微信打开这个活动连接时，可以用微信的分享功能

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

代码封装：

1、引入小程序SDK

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 = thisif (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.shareTitlelink: url + '?userId=' + userId + '&from=wechat', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl: shareData.shareImgUrl, // 分享图标success: function () {// 设置成功console.log('成功1')}})}})

4、通过error接口处理失败验证

wx.error(function(res){console.log(res)  //输出错误信息
});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！