VUE 分享给好友及朋友圈
项目场景：一个h5界面要求点击右上角三个点后点击微信好友分享带标题和图片给好友步骤如下：
一、下载 weixin-js-sdk
cnpm i weixin-js-sdk --save
二、页面引入
import wx from 'weixin-js-sdk'; // 引入wxjsimport { shares } from '@/api/index'; // 分享的接口 传给后端一个地址(与域名一致)
三、在 methods 中定义方法
// vue调用微信的自定义分享getShareInfo() {this.save = {url: location.href.split('#')[0] // 只需要传地址就好，其他后端都会写好来};shares(this.save).then(res => {const config = res.data;wx.config({appId: config.appId, // appID 公众号的唯一标识timestamp: config.timestamp, // 生成签名的时间戳nonceStr: config.nonceStr, // 生成签名的随机串signature: config.signature, // 生成的签名jsApiList: ['updateAppMessageShareData','updateTimelineShareData','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone',]});wx.ready(() => {var shareData = {title: '王者归来-王者突破特训营',desc: '帮助青铜早日登上王者之路',link: window.location.href,imgUrl:'分享出去的图片地址'};//点击要去分享wx.updateAppMessageShareData(shareData);wx.updateTimelineShareData(shareData);wx.onMenuShareTimeline(shareData);wx.onMenuShareAppMessage(shareData);wx.onMenuShareQQ(shareData);wx.onMenuShareWeibo(shareData);wx.onMenuShareQZone(shareData);});});}
四、在 mounted 中调用方法
mounted() {this.getShareInfo(); // 调用分享的事件},
以上就是实现的 具体步骤 希望对你有所帮助
