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

qc1iu 发布于2019-08-26 11:41 / 2041人阅读

摘要：问题描述在用做的单页面应用，模式为模式，应用是个商城，在进入商品详情页时，第一次进入页面提示签名无效，手动刷新一下就，很是烦躁，经过不懈努力，终于解决。

问题描述

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

问题分析

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

然而并没有提到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],
    ...
}

这样就完美解决！

GPU云服务器云服务器微信分享html页面 ios10遇到问题跨域取子页面的dom 子页面执行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107355.html

jssdk 在history模式下安卓不能调用图片上传接口和分享接口

摘要：配置先上配置每个页面都调用微信授权配置注是我在暴露的接口这份配置主要是根据微信公众号开发踩坑记录配置而来。首先说明，应用环境是使用的是vue+vue-router,history模式开发的单页应用。配置先上配置??? // index.js const protocol = location.protocol + // + location.host; router.afterE...

dkzwm 2019-08-22 15:37 评论0 收藏0
墨瞳漫画h5一期 vuejs总结

摘要：欢迎体验提墨瞳漫画这里踩的坑主要是组件的重用。这样可以防止图和图片大小不一样引起的页面跳动继而导致的加载图片时机错误。跨域时，会先发送一个空的请求来查看接口是不是支持跨域，再发送一次真实请求。前言博主也是vuejs萌新，公司仅我一个前端，收到做h5的需求后，马上想到要用下vuejs，于是说服领导，开始慢慢钻研，现在记录一下踩到的坑。这些坑主要是在一些组件的使用上，其它的只要好好看官...

王岩威 2019-08-20 11:10 评论0 收藏0
移动端H5开发遇到的坑

摘要：微信分享签名错误单页应用模式下微信分享一直提示签名错误按照微信官网文档，已经引入，正确的配置安全域名，后台开发人员生成的签名也通过微信签名工具验证，但是前端的自定义分享一直报签名错误，没有办法自定义分享，如果确保了哪些基本配置没有问题，并且微信分享签名错误invalid signature vue单页应用history模式下微信分享一直提示签名错误invalid signature ...

Eirunye 2019-08-26 13:39 评论0 收藏0
webpack配合vue.js实现完整的单页面demo

摘要：本篇文章主要是我在开发前研究了的单页面应用，因为需要用到的，所以确保安装了，建议官网安装最新的稳定版本。本文章只是和大家探讨怎么利用配合做一个单页面应用，具体关于里面的内容怎么写并不在本篇文章的介绍范围。本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用，因为需要用到node的npm，所以确保安装了node，建议官网安装最新的稳定版本。并且在项目中需要加载一些np...

2450184176 2019-08-19 18:35 评论0 收藏0
【Vue.js 牛刀小试】：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

摘要：而路由则是使用了中新增的事件和事件。总结这一章主要是介绍了如何使用在中构建我们的前端路由。系列目录地址一、基础知识概览第一章 - 一些基础概念（posted at 2018-10-31）第二章 - 常见的指令的使用（posted at 2018-11-01）第三章 - 事件修饰符的使用（posted at 2018-11-02）第四章 - 页面元素样式的设定（posted a...

cpupro 2019-05-22 19:26 评论0 收藏0