VUE真的是坑啊,你提供了history模式,却又不直接支持history模式打包,采用hash模式,打包后有#,导致微信分享失败,尝试了N中办法实际测试,都不行,最终还是采用了前端重定向解决
好了,不抱怨了,先说一下我的解决思路,首先微信分享步骤在此就不做赘述了,参照微信开发文档,
一.采用encodeURIComponent(无法分享)
获取微信签名都可以,但是最后分享出去的链接中还是会被微信截断,只能获取http://www.xxxx.com/html/dist/index.html首页
二.采用短连接,将URL先变成短链接(看似可以,不过微信不支持短链接分享)
参照https://api.weibo.com/2/short_url/shorten.json 获取短链接,这个可以成功获取到http:/t.cn/XXX
但是分享出去到微信就有问题了,在微信开发者工具中的值都没问题,单实际通过微信后,分享出去的信息不是短链接(其实是微信方法不支持直接默认采用了URL,而不是指定的短链接)
三.采用前端重定向(这个没有经过Router,没有#所有是可行的)
步骤1.在打包后的文件夹static下新建html(打包时会自动加载到包里面,公用的JS工具类也可以放到static目录下),
2添加js
<script>
let url = location.href.split('?')
let pars = url[1].split('&')
let data = {}
pars.forEach((n, i) => {
let p = n.split('=')
data[p[0]] = p[1]
})
if (!!data.eyunRedirect) {
self.location = decodeURIComponent(data.eyunRedirect)
}
</script>
3.包装分享转发出去的地址(唯一解决办法)
let parseDat= window.location.href.split('index.html#')[0] + 'static/html/redirect.html?eyunRedirect=' + encodeURIComponent(window.location.href)
然后调用
wx.onMenuShareTimeline({
title: shareTitle,
link: parseDat,
imgUrl: shareImg,
desc: shareDesc,
success: function (res) { },
cancel: function (res) { }
});
然后就可以了。
这是唯一解决办法了,没有其他的,除非你打包后的vue是history模式,不然不可能成功。
最后WX你大爷的真坑NND