记一次vue单页应用二级页面在微信的自定义分享
Posted super原
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记一次vue单页应用二级页面在微信的自定义分享相关的知识，希望对你有一定的参考价值。
问题复现
vue二级页面通过微信的分享的链接打开始终会跳到首页！
二维码是服务端生成，链接是二级页面的链接，微信扫码后，没能跳到详情页，还是跳到首页
由于服务端无法处理这个问题，只能自己生成，利用qrcode生成的二维码配合html2canva合成的图片中，二维码是空白的
出现的原因
只要是分享出去的页面，如果为hash模式（在路由中带有#号），微信都会在#的前边给加一 个‘？’。而vue单页面程序中除了一级页面以外的其他页面都是通过#/后面的路由导航过去的，所以，理所当然就被华丽丽的截掉了，于是就会发现你二级页面分享出去的链接点进去是一级页面
解决
第一个问题：
一番百度谷歌后，发现大部分答案是通过重定向的方式实现跳转，具体做法为，发现真的实现了，目前安卓是没问题的，ios待测试
在static下建一个redirect.html文件，文件内容为
<html><head><meta charset="UTF-8"><title></title></head><body><a id="aLink" href="" style="visibility:hidden;">下一步</a></body></html><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.app3Redirect) {document.getElementById('aLink').href = decodeURIComponent(data.app3Redirect);document.getElementById("aLink").click();}</script>
2.在微信分享的内容里面的link改为
const share_link = window.location.origin +"/dist/static/html/redirect.html?app3Redirect=" +encodeURIComponent(wxHref)// 坑点1：share_link前面必须带http头，不然会报签名错误// 坑点2：微信公众号配置的时候，只需要配置根域名即可：如http:test.aa.com/api只需要配置test.aa.com即可// 例：分享到微信朋友圈wx.onMenuShareTimeline({title: share_title, // 分享标题link: share_link, // 分享链接imgUrl: share_img, // 分享图标success: function () {vm.$toast.success('分享成功')}})// 由于wxHref会包含?等字段跟前面的?重复所以用encodeURIComponent函数进行编码后// 再到redirect页面解码
3.这些都配置完成后，大概率还有出现一些问题，就是签名错误
（1）服务器生成签名的时候url不要带#号
（2）确认签名算法是否正确，可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
4.一般单页应用的标题都是一样的，有这样的一个需求就是每个详情页都需要显示对应商品的title，我们可以使用vue-wechat-title这个插件，具体的使用如下
安装完成后在main.js里面
Vue.use(require('vue-wechat-title'))// 在需要定制title的页面使用以下指令v-wechat-title="$route.meta.title=lineDetails.title"// 也可以进行全局配置，具体用法见文档
总结：这些都配置完成后就可以实现定制title的分享跳转了
第二个问题：
这个问题跟第一个问题类似，生成二维码的时候把URL改成1.的share_link 即可
第三个问题：
自己生成二维码的时候一开始是使用qrcodejs2发现用html2canvas生成的base64图片中，二维码的位置是空白的，一番折腾后决定改用qrcanvas问题解决
import { qrcanvas } from "qrcanvas"; // 引入qrcanvasthis.$nextTick(() => {var canvas = qrcanvas({data: this.hostUrl, //二维码内容size: 150 //二维码大小});document.getElementById("qrcode").innerHTML = "";document.getElementById("qrcode").appendChild(canvas);this.createPoster();// createPoster方法是用html2canvas生成base64图片});createPoster() {if (this.user) {this.$toast.loading({duration: 3000,mask: true,message: "正在生成专属海报..."});const vm = this;setTimeout(function() {html2canvas(vm.$refs.poster, {allowTaint: true,useCORS: true// 这两个属性是处理跨域的在配合img上的crossorigin="anonymous"属性// 最主要的是后台的服务器需要配置允许跨域}).then(function(canvas) {vm.canvasImg = canvas.toDataURL();vm.$toast.clear();});}, 1000);}},
以上是关于记一次vue单页应用二级页面在微信的自定义分享的主要内容，如果未能解决你的问题，请参考以下文章