微信端H5的相关问题总结

微信端H5的相关问题总结

微信端路由(带[#])跳转问题

问题描述：在微信端页面路由跳转成功，但将跳转页分享出去会发现分享出去的链接为初始页面链接，导致与预期不一致的结果。
问题原因：在微信端浏览器中由路由跳转的spa应用，url将不会刷新，尤其体现在ios端
解决方案：不使用路由跳转，改成使用location.href等方式跳转

代码参考如下

this.$router.push({name: 'xxx'}） ->  location.href('xxx') 

微信二次分享问题

1. 微信二次分享需要使用jssdk，因此需要引用weixin-js-sdk（注：引用方式可以全局引用；也可以使用es6模块的方式引用，使用npm install weixin-js-sdk安装，然后通过import wx from 'weixin-js-sdk'引用）。
2. 微信 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