吐槽：关于微信自定义分享前前后后翻了文档两三遍，感觉大佬们写文档都是这么潇洒么？躲在角落里的我瑟瑟发抖了两天.....
下面我们（带着愤怒）来看微信文档来进行开发：传送门
1. 根据文档来配置（公众号安全域名，引入官方微信js）
2. 配置权限，根据微信文档描述：所有需要使用JS-SDK的页面必须先注入配置信息
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
----->>>>> 通过调用后台接口来获取上面的 （* 必填项）, 并在mounted开始配置初始化复制代码3. 通过ready接口处理成功验证（直接在ready方法内写分享朋友以及朋友圈）
wx.ready(function(){
// 分享到朋友圈
wx.onMenuShareTimeline ({
title: `title`,
desc: `desc`, // 分享描述
link: `自己分享的路由地址`, 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致复制代码 imgUrl: `自定义图标`, // 分享图标
success: function () {
},
cancel: function () {
}
});
// 分享给朋友
wx.onMenuShareAppMessage({
title: `title`,
desc: `desc`,
link: `自己分享的路由地址`, 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: `自定义图标`, // 分享图标复制代码 success: function () {
},
cancel: function () {
}
});
wx.error(function(){
salert('验证失败');
});
});复制代码通过以上三个步骤，微信分享朋友以及朋友圈功能完成，很高兴的打开本地微信开发者工具调试 >>> 成功了！！！！
带着自豪的心情告诉PR功能开发完上线。
过两天PR过来跟我说，微信分享有问题，WTF？？前两天还可以，突然就出问题了，下面是线上分享的截图：
接下来开始逐一来排查到底是哪出了问题，首先检查微信白名单、wx.config配置项、后台数据、以及异步初始化，然后又去开发者工具看了一下，并没有任何问题。于是又推上去了，发现还是分享不出来，又去微信看了一下文档，发现并没有违规字体以及任何违反微信文档的内容。反复分享发现一个规律。
重点来了！！！
只有在第一次分享出现标题以及连接丢失，刷新一次当前页面后再去分享就成功了，于是谷歌搜了一下，发现微信对SPA单页面分享并不是那么友好（突然让我想起了以前的IE...），在ios下面第一次分享的链接永远都是你第一次访问的url。看下图：
在ios系统要刷新一次来才能正确分享，并且要保存当前url
解决办法：
在src/assets/js目录下面新建一个share.js，并在main.js进行全局注册，在每个组件进行调用的同时通过beforeRouteEnter钩子判断ios终端，然后通过assign()方法加载一个新的文档，自此微信自定义分享结束啦...........,来看一下自定义分享成功之后的成果:
beforeRouteEnter具体实现方法：
beforeRouteEnter (to, from, next) {
var u = navigator.userAgent;
var IOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
// 修复iOS版微信HTML5 History兼容性问题
if (IOS && to.path !== location.pathname) {
// 此处不能用location.replace
location.assign(to.fullPath)
} else {
next()
}
}复制代码下面share.js是具体实现方法：
// ajax来请求wexin
function getWxChat() {
return new Promise((resolve, reject) => {
$.ajax({
url: 'https://res.wx.qq.com/open/js/jweixin-1.0.0.js',
dataType: "script",
cache: true,
})
.done(function () {
resolve(window.wx)
})
.fail(function (error) {
reject(error);
});
})
}
// 后台索要签名算法
function backAround() {
return new Promise((resolve, reject) => {
$.ajax({
url: `XXX.com`,//后台索要的算法签名
method: 'POST',
data: {
url: window.location.href.split('#')[0],
},
type : 'json'
}).done(function(ret) {
resolve(ret)
}).fail(function(ret) {
reject( ret );
})
})
}
export function wechatShare(shareDate) {
return new Promise(async function(resolve, reject) {
try{
let isWechat=navigator.userAgent.indexOf('MicroMessenger')>-1 //判断为微信浏览器
if(!isWechat){
return resolve('not weichat')
}
if(!window.wx){
await getWxChat();
}
var defaultData = {
title: `分享的标题`,
content: `内容`,
link: `${window.location.href}`,
logo: ``, //分享出来的图片的
success: function (res) {
},
}
let data = { ...defaultData, ...shareDate }
let ret = JSON.parse(await backAround())
wx.config({
debug: false, // 开启调试模式,
appId: 'XXXXX', // 必填，公众号的唯一标识
timestamp: ret.timestamp, // 必填，生成签名的时间戳
nonceStr: ret.nonce_str, // 必填，生成签名的随机串
signature: ret.signature,// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
})
wx.ready(function () {
wx.onMenuShareTimeline({
title: data.title,
desc: data.content,
link: data.link,
imgUrl: data.logo,
dataUrl: '',
success: data.success,
cancel: function () {}
})
wx.onMenuShareAppMessage({
title: data.title,
desc: data.content,
link: data.link,
imgUrl: data.logo,
dataUrl: '',
success: data.success,
cancel: function () {}
})
})
}catch(error){
reject( error );
}
})
}
复制代码最后想说下写内容的时候其实是在记录自己的血泪史,也给大家分享下微信自定义分享的坑,微信的文档有时候会让人怀疑人生，怀疑codeing,如果大家有什么更好的解决方法可以交流下。