vue 使用weixin-js-sdk
首先说明一下这个插件是干嘛的，weixin-js-sdk 可以设置分享朋友圈、朋友的图标、标题、摘要。
不得不说vue这两年的生态真是越来越强大了，不管什么东西，只要兼容了vue，只需install一下，盘就完事了。(官方文档把我看的头疼，一看那么长都不想看了)
官方文档：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
安装(-g全局 | -S本项目)
npm install weixin-js-sdk -S
引入
import wx from 'weixin-js-sdk'
使用
created() {
this.setwxshare(); //设置微信分享朋友圈
},
mounted() {},
methods: {
//设置微信分享朋友圈
setwxshare() {//先获取后台的配置
let param = new URLSearchParams();
let that = this;
param.append("url", window.location.href.split("#")[0]);
axios .post("/aaaaaaa", param)
.then((res) => {
var obj = res.data.data;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: obj.appid, // 必填，公众号的唯一标识
timestamp: obj.timestamp, // 必填，生成签名的时间戳
nonceStr: obj.nonceStr, // 必填，生成签名的随机串
signature: obj.signature, // 必填，签名
jsApiList: [
"updateAppMessageShareData",
"updateTimelineShareData",
], // 必填，需要使用的JS接口列表
});
})
.catch((err) => {
console.log("设置微信分享失败");
});
},
},
watch: {
$route(to, from) {
this.setwxshare(); //设置微信分享朋友圈
},
},就这样，只要服务端返回的签名没有错，就能配置成功，就可以使用微信js-sdk啦。
//获取活动信息并设置微信分享
getCONTACT() {
axios .get("/aaaaaa" + this.id)
.then((res) => {
if (res.data.data) {
this.CONTACT = res.data.data;
var obj = this.CONTACT;
wx.ready(function () {
//需在用户可能点击分享按钮前就先调用
//自定义“分享给朋友”及“分享到QQ”按钮的分享内容
wx.updateAppMessageShareData({
title: obj.title, // 分享标题
desc: obj.summary, // 分享描述
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: obj.thumbMediaUrl, // 分享图标
success: function () {
// 设置成功
Notify({
type: "success",
message:
"点击右上角可以分享到朋友圈与朋友",
});
},
});
//自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
wx.updateTimelineShareData({
title: obj.title, // 分享标题
link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: obj.thumbMediaUrl, // 分享图标
success: function () {
// 设置成功
Notify({
type: "success",
message:
"点击右上角可以分享到朋友圈与朋友",
});
},
});
});
} else {
this.CONTACT = {};
this.$toast.loading({
message: "详情获取失败...",
duration: 2000,
});
}
})
.catch((err) => {
this.$toast.loading({
message: "详情获取失败...",
duration: 2000,
});
});
},注意
1.每次url变化之后都需要重新微信jssdk授权，虽然每次授权url除去#后都是一样的，但是必须这么做，微信的机制。(参考第一大块代码)
2.使用微信自定义分享功能的时候，当分享链接中存在中文的时候，一定要进行encodeURIComponent()，否则在安卓手机上能成功自定义分享，ios手机上则不能成功分享。查阅资料后得知是安卓手机会自动encodeURIComponent，而ios不会。
3.如果使用了history路由模式，传给后台url的时候也使用window.location.href.split("#")[0]。
原创不易，记得点赞
作者：渡_d
链接：https://www.jianshu.com/p/7048005a4933
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。