项目场景:
项目场景:一个h5界面要求点击右上角三个点后点击微信好友分享带标题和图片给好友效果图如下
首先得得下载微信的 weixin-js-sdk
cnpm i weixin-js-sdk --save
在需要分享的页面引入
import wx from 'weixin-js-sdk'; // 引入wxjs
import { 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(); // 调用分享的事件
},
ok好了,这就是我项目效果图及代码,希望对你们有所帮助,觉得还行的,可以点点关注啊