最近有一个微信分享的功能，恰逢疫情期间远程办公，然后家里的笔记本比较拉闸本地环境不完善，然后远程办公只能推代码到测试环境调试，博主也是比较难受，日渐憔悴，一周没对接好的问题，好在到了公司一下午就调试好了，废话不多说了
分享成功失败的对比微信截图如下
在这之前
主要代码
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);
}
});
})
})
},
在这之前
1.
2020年3月16日10:27:41 这个时间节点的技术要求，这个功能必须依赖 微信公众号
2.
配置api以及js域名白名单
3.
验签 ，博主这里是前端调接口，后端验签，常规操作是这样，但是前端也可以自己去验签，不过这个比较少见吧，视自己情况，前端验签网上应该有不少教程，这里就不多阐述了。
4. 验签传的url切记let urlPath = location.href.split("#")[0] || "";不管你的项目有没有#，给我加上就完事了 请求参数记得encodeURIComponent一下var data = {//请求参数 url: encodeURIComponent(urlPath), // keyi }
5.updateTimelineShareData很关键，不要给我用什么 onmune的方法，要废弃了， jsdk版本1.4.0给我装1.6.0 ，npm装不上的，index.html 用script标签引用，像博主这样window调用，有问题的私聊我。这里let urlPath = this.url.split("#")[0] || "";加上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); } });
这样玩。
正常流程走下来，如果你操作没问题基本就分享成功了。
然后下面说几个博主踩的坑，仅供借鉴
不成功的又不知道错在哪里的用微信开发者工具给我调试
1.
pc端微信分享成功然后手机不行的，统统给我用jsdk1.6.0的版本
2.
63004几个常见的错误
js和api域名白名单一定要配置
然后 后端的验签有专门网站可以验证，其他步骤没错就去调试下这个
3.
出现url报错的就看下我上面的。#去没去 加密加没加
