1、使用了weixin-js-sdk，只实现了自定义右上角的分享功能
安装命令：npm install weixin-js-sdk --save
import wx from 'weixin-js-sdk'getConfigData({url: encodeURIComponent(location.href.split('#')[0])}).then(res => {console.log("---分享",res.result);const result = res.result;wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来appId: result.appId, // 必填，公众号的唯一标识timestamp: result.timestamp, // 必填，生成签名的时间戳nonceStr: result.nonceStr, // 必填，生成签名的随机串signature: result.signature,// 必填，签名jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline',] // 必填，需要使用的JS接口列表});wx.ready(() => { //需在用户可能点击分享按钮前就先调用wx.onMenuShareAppMessage({title: '开心银行的分享', // 分享标题desc: '开心银行的描述', // 分享描述link: 'http://localhost:8000/base/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致【访问前端H5的路径】imgUrl: 'https://aaa/4964dad285519caf7fb2eed60ed7dff_1640677600424.jpg', // 分享图标type: 'link', // 分享类型,music、video或link，不填默认为linksuccess: function () {// 设置成功this.$message.success("自定分享成功！");}})});}
实现功能：
自定义了右上角的分享链接，并未实现点击分享按钮打开微信的分享面板
2、使用Nativeshare.js在移动端浏览器分享网页到微信，QQ等
此网址：/package/nativeshare
GitHub地址：/fa-ge/NativeShare/blob/master/README.md
安装命令：npm install --save nativeshare
import share from "@/assets/js/wxshare";var nativeShare = new NativeShare();getConfigData({url: encodeURIComponent(location.href.split('#')[0])}).then(res => {console.log("---分享",res.result);const result = res.result;// 你也可以在setConfig方法中设置配置参数nativeShare.setConfig({wechatConfig: {appId: result.appId,timestamp: result.timestamp,nonceStr: result.nonceStr,signature: result.signature,}})// 设置分享文案nativeShare.setShareData({icon: '/workorder/4964dad285519caf7fb2eed60ed7dff_1640677600424.jpg',link: 'http://localhost:8000/base/index',title: '来自开心银行的分享',desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',from: '@fa-ge',})// 唤起浏览器原生分享组件(如果在微信中不会唤起，此时call方法只会设置文案。)try {nativeShare.call();// 如果是分享到微信则需要 nativeShare.call('wechatFriend')// 类似的命令下面有介绍} catch(err) {// 如果不支持，你可以在这里做降级处理console.log(err)}}
在微信浏览器中未能唤起分享面板：唤起浏览器原生分享组件(如果在微信中不会唤起，此时call方法只会设置文案。)
实现功能：微信公众号中未实现，在夸克浏览器测试成功，图如下：
求助：H5微信公众号难道无法实现点击按钮直接打开分享面板吗？
如果觉得《H5微信公众号 如何在页面点击按钮打开分享面板【求助】》对你有帮助，请点赞、收藏，并留下你的观点哦！
