微信端H5的相关问题总结
微信端路由(带[#])跳转问题
问题描述:在微信端页面路由跳转成功,但将跳转页分享出去会发现分享出去的链接为初始页面链接,导致与预期不一致的结果。
问题原因:在微信端浏览器中由路由跳转的spa应用,url将不会刷新,尤其体现在ios端
解决方案:不使用路由跳转,改成使用location.href等方式跳转
代码参考如下
this.$router.push({name: 'xxx'}) -> location.href('xxx')
微信二次分享问题
- 微信二次分享需要使用jssdk,因此需要引用
weixin-js-sdk
(注:引用方式可以全局引用;也可以使用es6模块的方式引用,使用npm install weixin-js-sdk
安装,然后通过import wx from 'weixin-js-sdk'
引用)。 - 微信 jssdk 中的api
wx.config({xxx})
中需要提供签名(signature字段),签名通过发送请求至https://xxx/signature?_=new Date().getTime()&url=encodeURIComponent(url)
获取,此处需要注意一个细节url,url必须跟当前页面一致(hash部分不需要),否则获得的签名在wx.config({xxx})的校验中将会报签名不合法的错误。
微信二次分享配置详情
import axios from 'axios'
import wx from 'weixin-js-sdk'
const wex = {
shareTwo(obj) {
obj = Object.assign({}, {
title: 'xxx', // 二次分享标题
msg: 'xxx', // 二次分享内容
imgUrl: 'xxx',// 二次分享图标
url: window.location.href, // 当前页面地址(注:!!特别重要,要用于获取签名)
link: '' // 二次分享的链接地址
}, obj)
let wxReady = false // 设置wxReady的状态为false
let wxConfigParam = { // 基本的一些wxC