业务场景
公司要做一个在微信上使用的类电商的项目，有个通用的底bar，分为主页、XX、XX、个人中心这四个，主页可以跳商品详情页，个人主页可以跳邀请页。上面几个是需要分享的。
我们的业务不涉及二次分享，微信二次分享会在url后面拼上一段字符串，会导致签名获取失败
使用history路由
因此本文章主要讨论上述两种业务场景
一般实现
我们将设置微信分享的js作为一个公用方法放出去
@assets/js/wx_share.js
export function setShare(shareDate,cb) {
//微信分享
window.wx.config({
...
});
window.wx.ready(function(){
// 分享给微信好友
window.wx.onMenuShareAppMessage({
title: shareDate.shareTitle, //分享标题
desc: shareDate.shareContent, //分享描述
link: shareDate.shareUrl, //分享链接
imgUrl: shareDate.shareImgUrl, //分享图标
type: 'link', //分享类型,music、video或link，不填默认为link
success: function () {
cb()
},
cancel: function () {
}
});
...
});
};
然后点定义一个专门的微信分享模块，控制弹层的显示以及分享内容的变更
@components/public/wxmc/index.vue
<template>
<div class="wxmc">
...
</div>
</template>
<script>
import { setShare } from '@assets/js/wx_share'
export default {
...
methods: {
...mapActions('productList', ['getJsSignPackage']), //管理获取微信签名请求
goShare(params) {
setShare(params, () => {...})
}
}
}
</script>
然后在其他组件中引入这个组件，调用这个ref的goShare方法即可
当然，我们应在最初始的App.vue的created内首先执行一次（请求后），设置默认分享内容
出现问题
首先说明一点，在微信开发者工具里面，关于微信config的提醒是无效的，是无效的，是无效的。就算他告诉你config:ok，那也不是真OK（起码截止到2018.4.1的版本），具体体现之后说
关于分享失败（分享出去的是当前页面的title以及当前页面的host）有下列两种原因（除了自己写错代码）
1.签名问题
2.安全域名问题
1、签名问题
这个要区分IOS以及Android，查阅一些资料后，我感觉可信的原因是
vue-router切换的时候操作的都是浏览器的历史记录，iOS会把第一次刚进入时的URL作为真实URL。安卓会把当前URL作为真实URL。 知乎 SUGAR
需要在wxml组件内的setShare做如下判断：
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
setShare(..., () => {...})
} else {
this.getJsSignPackage({url: window.location.href.split('#')[0]}).then(res => {
...
setShare(..., () => {...})
})
}
如果是安卓，每次重新拉密钥，苹果只在最开始拉一次
在微信开发者工具里面，全部按照安卓来走，也就是说每次不获取就报错，但实际是成功的
2、域名问题
到此为止，前端能做的全都做了，剩下再出问题，只能是公众号设置的问题了，相信自己
ps：我特么查了两天，一直以为是自己写的问题。。。。
微信分享的域名必须和当前页面的域名是一样的，而恰巧，我们新捣鼓出一个，所以就必须要在公众号的安全域名里设置，测试号只能有一个安全域名，所以只能拿线上的来用，三个，一个月换一次，大家别手抖。。。
当然还有种情况，history路由需要后台做映射，具体就不展开了，如果不映射的话不仅单页面刷新会出问题，微信分享也会出问题
现在还存在的bug
这个bug就暂时不好解决了，不过影响也不大。如果用户清空微信缓存（IOS，安卓app内无此功能）并且退出账号重新登录，第一次进去，分享是失败的。退出页面再进去，一切OK。。。。鉴于时间紧任务重我选择忽略，嗯。。。
关于二次分享失败的问题
本质就是url后面拼了东西，当初实习的时候做了一个投票的活动也有这个问题，记得仅仅处理了window.location.href.split('#')[0]就完事了，和后台商量好就解决了
END
大家还有什么遇到的奇怪bug分享下~
