vuejs構(gòu)建的單頁面應(yīng)用history模式子頁面微信分享在iOS中遇到的問題

qc1iu 發(fā)布于2019-08-26 11:41 / 2078人閱讀

摘要：問題描述在用做的單頁面應(yīng)用，模式為模式，應(yīng)用是個商城，在進入商品詳情頁時，第一次進入頁面提示簽名無效，手動刷新一下就，很是煩躁，經(jīng)過不懈努力，終于解決。

問題描述

在用vuejs做的SPA單頁面應(yīng)用，router模式為history模式，應(yīng)用是個商城，在進入商品詳情頁時，第一次進入頁面提示簽名無效，手動刷新一下就ok，很是煩躁，經(jīng)過不懈努力，終于解決。

問題分析

微信官方j(luò)s-sdk文檔上是這么寫的

然而并沒有提到iOS，通過在真機上測試，問題應(yīng)該是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云服務(wù)器云服務(wù)器微信分享html頁面 ios10遇到問題跨域取子頁面的dom 子頁面執(zhí)行

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107355.html

相關(guān)文章

jssdk 在history模式下安卓不能調(diào)用圖片上傳接口和分享接口

摘要：配置先上配置每個頁面都調(diào)用微信授權(quán)配置注是我在暴露的接口這份配置主要是根據(jù)微信公眾號開發(fā)踩坑記錄配置而來。首先說明，應(yīng)用環(huán)境是使用的是vue+vue-router,history模式開發(fā)的單頁應(yīng)用。配置先上配置??? // index.js const protocol = location.protocol + // + location.host; router.afterE...

dkzwm 2019-08-22 15:37 評論0 收藏0
墨瞳漫畫h5一期 vuejs總結(jié)

摘要：歡迎體驗提墨瞳漫畫這里踩的坑主要是組件的重用。這樣可以防止圖和圖片大小不一樣引起的頁面跳動繼而導(dǎo)致的加載圖片時機錯誤?？缬驎r，會先發(fā)送一個空的請求來查看接口是不是支持跨域，再發(fā)送一次真實請求。前言博主也是vuejs萌新，公司僅我一個前端，收到做h5的需求后，馬上想到要用下vuejs，于是說服領(lǐng)導(dǎo)，開始慢慢鉆研，現(xiàn)在記錄一下踩到的坑。這些坑主要是在一些組件的使用上，其它的只要好好看官...

王巖威 2019-08-20 11:10 評論0 收藏0
移動端H5開發(fā)遇到的坑

摘要：微信分享簽名錯誤單頁應(yīng)用模式下微信分享一直提示簽名錯誤按照微信官網(wǎng)文檔，已經(jīng)引入，正確的配置安全域名，后臺開發(fā)人員生成的簽名也通過微信簽名工具驗證，但是前端的自定義分享一直報簽名錯誤，沒有辦法自定義分享，如果確保了哪些基本配置沒有問題，并且微信分享簽名錯誤invalid signature vue單頁應(yīng)用history模式下微信分享一直提示簽名錯誤invalid signature ...

Eirunye 2019-08-26 13:39 評論0 收藏0
webpack配合vue.js實現(xiàn)完整的單頁面demo

摘要：本篇文章主要是我在開發(fā)前研究了的單頁面應(yīng)用，因為需要用到的，所以確保安裝了，建議官網(wǎng)安裝最新的穩(wěn)定版本。本文章只是和大家探討怎么利用配合做一個單頁面應(yīng)用，具體關(guān)于里面的內(nèi)容怎么寫并不在本篇文章的介紹范圍。本篇文章主要是我在開發(fā)前研究了webpack+vue.js的單頁面應(yīng)用，因為需要用到node的npm，所以確保安裝了node，建議官網(wǎng)安裝最新的穩(wěn)定版本。并且在項目中需要加載一些np...

2450184176 2019-08-19 18:35 評論0 收藏0
【Vue.js 牛刀小試】：第十二章 - 使用 Vue Router 實現(xiàn) Vue 中的前端路由控制

摘要：而路由則是使用了中新增的事件和事件?？偨Y(jié)這一章主要是介紹了如何使用在中構(gòu)建我們的前端路由。系列目錄地址一、基礎(chǔ)知識概覽第一章 - 一些基礎(chǔ)概念（posted at 2018-10-31）第二章 - 常見的指令的使用（posted at 2018-11-01）第三章 - 事件修飾符的使用（posted at 2018-11-02）第四章 - 頁面元素樣式的設(shè)定（posted a...

cpupro 2019-05-22 19:26 評論0 收藏0