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微信公众号 如何在页面点击按钮打开分享面板【求助】》对你有帮助,请点赞、收藏,并留下你的观点哦!