vuejs構建的單頁面應用history模式子頁面微信分享在iOS中遇到的問題

qc1iu 發布于2019-08-26 11:41 / 2064人閱讀

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

問題描述

在用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 子頁面執行

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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