直擊根源:vue專案微信小程式頁面跳轉web-view不重新整理

奔跑的Abbott 發表於2019-08-13
Vue

背景

最近專案需要適配小程式,專案是使用了vue開發的網站,其中改造方式是,每個頁面都使用小程式建立一個頁面通過web-view來顯示指定頁面的。

在沒有使用小程式時,路由跳轉時,重新整理頁面等等,這個是很順暢的,在使用了小程式之後,需要適配小程式的頁面,比如後退到前一頁,這個時候要重新整理頁面,於是遇到了小程式的一些特性。

問題描述

有兩個頁面:A=http://demo.com/#/A?code=12,B=http://demo.com/#/B?index=2

A頁面跳到B頁面,B頁面把一些處理後的結果以引數的形式傳給A頁面。

例如:B頁面的使用了wx.navigateBack(其它跳轉函式同理),且url(http://demo.com/#/A?code=12&index=12)以引數的形式傳給了A頁面,A頁面在OnShow方法裡面重新設定了web-view的src地址,能保證正確,但是頁面就是不重新整理,且使用微信開發者工具,能看到src已經被改變了。

嘗試解決

  1. 網上一些方法:比如先設定src為空字串,然後再通過setTimeout設定src為期望的值,且要設定時間為60ms以上(玄學),這個方法之前我還真解決了一個問題,不過那個場景是:A是一個web-view頁面,B是一個小程式頁面,B返回A時,通過給A傳遞引數,設定src可以通過此方法正確顯示,此方法但是沒有解決A、B頁面都是web-view的形式。

  2. 網上一些方法:在B頁面先把A頁面的src設定為空,然後再直接設定為需要的url,此方法依然對本問題無效

  3. 我把1、2兩種方案結合也沒有解決。

  4. 最小化正確原型

    這個時候,我在思考這個頁面到底能不能正常重新整理,注意這個想法非常的重要:

    我用了最小正確原型來先驗證,能否正確得到期望,最小原型如下:

    A的頁面web-view src=https://baidu.com,然後開啟看一下,可以正常顯示頁面,之後在B頁面返回A頁面時,給A頁面傳遞了一個url,在A頁面OnShow裡面設定了A的src=https://www.qq.com,結果頁面重新整理了,正確的顯示了www.qq.com頁面,也就是說不需要什麼settimeout。

    之後反覆測試,同樣的連線是不重新整理的;設定為空是不重新整理的。

    這個時候,已經找到了可以正常重新整理的條件,不是原連結、不是空,都可以重新整理頁面,那麼問題來了,A頁面的連結都已經變了,後面的引數變了,怎麼還跟快取了一樣(同一個get連結,會被快取起來的)。

  5. 再分析原始的A的連結
    http://demo.com/#/A?code=12,變成了http://demo.com/#/A?code=12&index=12,這個形式,改變夠大了,但是還是快取了,這個時候應該就是快取策略問題了,畢竟以前解決ie瀏覽器時,我們通過新增url隨機數就可以避免。

    注意到了嗎?vue頁面中使用了#作為路由判斷的,而#在瀏覽器中是作為錨點使用的,是不是小程式對這個解析也有差別,認為是同一個頁面,於是做了如下的測試:
    http://demo.com/?code=12&index=12/#/A

    結果,引數放到#之前,小程式果然重新整理了,看來小程式對#就是按照同一個頁面解析的,好了重新整理的問題解決了,下來看看vue是否能正確識別引數

    使用this.$route.query.index的值,成功取得了值。

最後

自此問題得以解決,總結如下:

  1. 網上的很多解決方法適用場景可能跟你的不一樣;
  2. 黔驢技窮時,使用最小正確原型開始驗證期望;
  3. 找到差異的地方,或者特殊的地方可能就是問題所在;
  4. 懂原理、機制能事半功倍快速解決問題
  5. 小程式還可以提升的更好,比如方案1真的有效,要不是之前第一版遷移方案我遇到過,我都覺得這個是開玩笑的方法

相關文章

Vue

深入理解vue中的slot與slot-scope

作者/雲荒杯傾寫在前面vue中關於插槽的文件說明很短,語言又寫的很凝練,再加上其和methods,data,computed等常用選項在使用頻率、使用先後上的差別,這就有可能造成初次接觸插槽的開發者容
Vue

vue 原始碼目錄設計

Vue.js 的原始碼都在 src 目錄下,其目錄結構如下。src├── compiler        # 編譯相關├── core            # 核心程式碼├── platforms 
Vue

Vue.js 原始碼構建

Vue.js 原始碼是基於 Rollup 構建的,它的構建相關配置都在 scripts 目錄下。構建指令碼通常一個基於 NPM 託管的專案都會有一個 package.json 檔案,它是對專案的描述檔
Vue

vue父子元件通訊高階用法

vue專案的一大亮點就是元件化。使用元件可以極大地提高專案中程式碼的複用率,減少程式碼量。但是使用元件最大的難點就是父子元件之間的通訊。子通訊父父元件<template> <div
Vue

記一次 vue 的非同步更新佇列導致記憶體洩漏

由於專案是需要連續傳輸圖片形成一個偽視訊(沒辦法,客戶錢給的不夠)來觀看。後端採用傳輸base64的圖片到前端展示。php: 7.2workerman: 3.Xvue: 2.Xworkerman與樹
Vue|PHP

可以生成 Vue 自定義元件的 PHP 表單生成器,支援 IView 和 ElementUI

FormBuilder 是一個開源的PHP表單生成器,可以快速生成現代化的form表單。還可以配合開源專案 xaboy/form-create 生成任何 Vue 元件環境需求PHP >= 5.4
Vue

vue 常量定義和使用

用的vue-cli 3.x構建的 vue專案,如何定義不同環境下的常量呢?一下已定義全域性BASE_URL舉例在config/dev.env.js 下'use strict'const merge =
Vue

Ant-design-vue 專案實戰筆記 (後繼將繼續補充)

安裝1.直接下載 / CDN https://unpkg.com/vue-router/dist/vue-router.js 你也可以像https://unpkg.com/vue-rout
Vue

Nginx 服務部署 Vue 專案後重新整理頁面,出現 404 問題

1.vue-cli 3.x2.Nginx專案之前vue-router使用預設‘hash’模式,在本地與部署線上環境後都沒有問題,因為要去掉URL中的 ‘#’ 號,故使用‘history’路由模式,故再
Vue

Vue-Cli 3+tinymce 5 富文字編輯器整合

文章參考自 點選前往// 安裝 tinymce-vuenpm install @tinymce/tinymce-vue -S// 安裝 tinymcenpm install tinymce -Stin
Vue

Vue 3 原始碼開放,今天你學習了嗎?

正在海邊浪的思否小姐姐一覺睡醒發現,國慶假期都不休息的尤雨溪大大在昨天凌晨釋出了 Vue 3 原始碼,原始碼地址:https://github.com/vuejs/vue-... ——作者表示,目前
Vue

vue 靜態檔案上傳到七牛

1.七牛官網申請賬號具體申請流程不詳細贅述了.最好申請一個自己的專屬檔案域名.去阿里雲配置CNAME2.修改專案index.jsvar path = require('path')module.exp