Recently, there is a WeChat sharing function, which coincides with the remote office during the epidemic, and then the laptop at home is relatively local. The problem of good connection, fortunately, it was debugged in the afternoon after arriving at the company.
The screenshot of the comparison WeChat for successful and failed sharing is as follows.
Prior to this, the
main code
getShareInfo (tit, fxUrl) {//如果分享的内容会根据情况变化，那么这里可以传入分享标题及url
let urlPath = location.href.split("#")[0] || "";
var data = {//请求参数
url: encodeURIComponent(urlPath), // keyi
}
getWxJSSDKConfig(data)//这里我写了一个公用的接口请求js，这里正常axios请求就可以，只要拿到数据都可以
.then(res => {
res.data.debug = true
console.log("jsapi_ticket", res.data)
localStorage.setItem("jsapi_ticket", res.data);
window.wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.appId, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名，见附录1
jsApiList: res.data.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
// jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
})
let urlPath = this.url.split("#")[0] || "";
window.wx.ready(() => {
// alert("准备完毕，加载方法");
//分享到朋友圈
window.wx.updateTimelineShareData({
title: '共克疫情，四喜在线服务', // 分享时的标题
link: urlPath, // 分享时的链接 // keyi
imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'), // 分享时的图标
success: function () {
console.log("分享成功");
},
cancel: function () {
console.log("取消分享");
}
});
//分享给朋友
window.wx.updateAppMessageShareData({
title: '共克疫情，四喜在线服务',
desc: '千人专业电商运营公司，深耕行业12年，一键免费制定电商解决方案。',
link: urlPath, // keyi
imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'),
type: '',
dataUrl: '',
success: function (n) {
console.log("分享成功", n);
},
complete: function (n) {
console.log(n);
}
});
})
})
},
Before this
1.
Technical requirements of this time node at 10:27:41 on March 16, 2020, this function must rely on the WeChat public account
2.
Configure api and js domain name whitelist
3.
Check the signature, blogger here is the front-end adjustment The interface, backend verification, and normal operation are like this, but the frontend can also check it yourself, but this is relatively rare. Depending on your situation, there should be many tutorials on the frontend verification online, which will not be described here.
4. Check the url of the signature. let urlPath = location.href.split("#")[0] || "";Regardless of whether your project has #, add it to me and it ’s done. Request parameters. Remember to encodeURIComponent var data = {//请求参数 url: encodeURIComponent(urlPath), // keyi }
5.updateTimelineShareData is very important, do n’t give me any onmune method, it must be abandoned, jsdk version 1.4 .0 installed 1.6.0 for me, which could not be installed by npm, index.html was referenced by script tag, and it was called by a window like blogger. let urlPath = this.url.split("#")[0] || "";Add here let urlPath = this.url.split("#")[0] || ""; window.wx.ready(() => { // alert("准备完毕，加载方法"); //分享到朋友圈 window.wx.updateTimelineShareData({ title: '共克疫情，四喜在线服务', // 分享时的标题 link: urlPath, // 分享时的链接 // keyi imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'), // 分享时的图标 success: function () { console.log("分享成功"); }, cancel: function () { console.log("取消分享"); } }); //分享给朋友 window.wx.updateAppMessageShareData({ title: '共克疫情，四喜在线服务', desc: '千人专业电商运营公司，深耕行业12年，一键免费制定电商解决方案。', link: urlPath, // keyi imgUrl: this.$CDN('/all/activity/41c521dede10bd48a37eb1b2bd6b600.jpg'), type: '', dataUrl: '', success: function (n) { console.log("分享成功", n); }, complete: function (n) { console.log(n); } });
to play like this.
The normal process goes down, if you have no problem with the operation, the sharing will be successful.
Then the following talk about the pits that several bloggers step on, just for reference
Unsuccessful do not know what went wrong with the micro-channel developer tools to debug I
1.
PC end micro-channel to share the success and the phone does not work, I used to all versions of jsdk1.6.0
2.
63004 several common mistakes
js and api The domain name whitelist must be configured,
and then the backend verification has a special website to verify, and the other steps are correct, go to debug this
. 3. If
there is an url error, look at me above. # 去 没 去 cipher plus not plus
