npm install weixin-js-sdk 微信分享
描述：H5页面在微信环境点击右上角的三个点分享朋友圈、好友卡片功能
import wx from "weixin-js-sdk";
param: {
jsapi_ticket: "",
noncestr: "hjt-activity818",
url: "", 签名的url地址
},
this.param.url去的时候当前url的#前的部分，如果是history模式则取全部url地址进行签名
wxConfig: {
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
appId: "", // 必填，公众号的唯一标识
timestamp: "", // 必填，生成签名的时间戳、是秒不是毫秒
nonceStr: "", // 必填，生成签名的随机串
signature: "", // 必填，签名
jsApiList: [],
},
第一步：接口获取getTicket；
第二步：获取签名signature
成功获取签名后的wx.config赋值
例：res.then((res) => {
let wxShare = JSON.parse(JSON.stringify(res)).data;
if (wxShare.code == "00000" && wxShare.data != null) {
this.wxConfig.timestamp = wxShare.data.timestamp;
this.wxConfig.signature = wxShare.data.sign;
this.wxConfig.nonceStr = this.param.noncestr;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: that.wxConfig.appId, //congig.appId, // 必填，公众号的唯一标识，填自己的！
timestamp: that.wxConfig.timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
nonceStr: that.wxConfig.nonceStr, // 必填，生成签名的随机串
signature: that.wxConfig.signature, // 必填，签名，见附录1
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
});
}
// 获取分享权限
setTimeout(() => {
wx.updateAppMessageShareData({
title: that.articleData.title,
desc: that.articleData.summary,
link: this.signUrl, //`https://fat-promo.pyamc.com/cms-app-html/articlesShare?articleId=${that.articleId}&channel=201211&channelCode=P0700100`,
imgUrl: "https://m.pyamc.com/trade/img/[email protected]",
success: function () {
console.log("分享成功");
},
fail: function () {
console.log("分享失败");
},
cancel: function () {
console.log("取消分享");
},
});
// 获取分享权限
wx.updateTimelineShareData({
title: that.articleData.title,
link: this.signUrl,//`https://fat-promo.pyamc.com/cms-app-html/articlesShare?articleId=${that.articleId}&channel=201211&channelCode=P0700100`,
imgUrl: "https://m.pyamc.com/trade/img/[email protected]",
success: function () {
console.log("分享成功");
},
fail: function () {
console.log("分享失败");
},
cancel: function () {
console.log("取消分享");
},
});
}, 300);
});
重点：1、签名的地址是当前地址的#号前部分可以用window.location.href.split("#")[0]获取，如果是history模式取全地址
2、签名用的时间戳是秒不是毫秒；
3、获取权限加定时器是防止ios分享会出错；