vuejs构建的单页面应用history模式子页面微信分享在iOS中遇到的问题

huangsh

问题描述

在用vuejs做的SPA单页面应用,router模式为history模式,应用是个商城,在进入商品详情页时,第一次进入页面提示签名无效,手动刷新一下就ok,很是烦躁,经过不懈努力,终于解决。

问题分析

微信官方js-sdk文档上是这么写的

clipboard.png

然而并没有提到iOS,通过在真机上测试,问题应该是iOS和安卓处理URL的方式不同,安卓手机没有问题,iOS上需要进入商品详情页刷新一下才能正确的进行微信config.

问题解决

如果你有多个页面需要做分享,可以这样做:

// mixins/assign.js

const location = global.location
const u = navigator.userAgent
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

export default {
  beforeRouteEnter(to, from, next) {
    if (isiOS && to.path !== location.pathname) {
      // 此处不能使用location.replace
      location.assign(to.fullPath)
    } else {
      next()
    }
  }
}

然后:

import assign from '@/mixins/assign.js'

export default {
    ...
    mixins: [assign],
    ...
}

这样就完美解决!

阅读 4.1k

前端_风雨开发路
用心整理web前端开发过程中遇到的坑和绕过的弯,希望能帮助到茫茫人海中的你!

灵魂和皮囊能够握手言和,面子和里子能够始终如一。

258 声望
15 粉丝
0 条评论

灵魂和皮囊能够握手言和,面子和里子能够始终如一。

258 声望
15 粉丝
文章目录
宣传栏