公众号APP内嵌H5

最近的工作老和微信有关,不是小程序就是公众号的,微信的东西是真难用:(

单独建立一个跳转到app的页面

  1. 页面中使用a做跳转,具体路径需要APP端提供
1
<a href="weixin://">跳转到微信</a>
  1. 微信浏览器需要判断是否显示引导到浏览器页面打开:
1
2
3
4
5
6
7
8
9
10
var u = navigator.userAgent;

//android终端
export const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;

//ios终端
export const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

//微信浏览器
export const isWechat = u.toLowerCase().match(/MicroMessenger/i) == "micromessenger";

解决微信浏览器中遇到的问题

这里遇到个问题,微信跳转到浏览器页面后地址不是引导页面的地址(例如路径:从’/#/‘ 到’/#/a’ 再到’/#/b’后,使用浏览器打开地址依然是’/#/‘

  1. vue-router模式需要改为history

    1
    2
    3
    4
    new Router({
    mode: 'history',
    routes: []
    })
  2. 引导页面需要replace刷新一下

    1
    2
    3
    4
    5
    6
    created() {
    let _href = window.location.href;
    if (_href.indexOf('&__replace=1') <= -1) {
    window.location.replace(_href + '&__replace=1')
    }
    }
  3. 解决刷新页面后vuex中缓存的数据会清除的问题

    1
    2
    3
    4
    5
    6
    //储存要临时缓存的数据(可以在replace前储存)
    sessionStorage.setItem("store", JSON.stringify(this.$store.state))
    //读取缓存中的数据(在app.vue中读取写入vuex)
    if (sessionStorage.getItem("store")) {
    this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))
    }

(或者直接写个静态页面也行)

坚持原创技术分享,您的支持将鼓励我继续创作!