微信Webapp開發的各類變態路由需求及解決辦法!

前言

最近在使用BUI Webapp開發的一個小商城項目在微信上遇到一些坑及變態需求, 層層深刻, 整理一下給後來人參考. 必定有你還不知道的!

調試緩存

問題描述: 微信打開的web頁面默認是會緩存的,這是爲了加載更快,原本是好事,但對於用來調試的咱們就比較痛苦了,往往更改一些js,html, 刷新之後,怎麼樣都去不掉.

解決辦法: 每次修改html 在後面增長? 參數, 每次修改js, 在頁面引入的時候, 增長問號加時間戳的方式..但依然很痛苦.

BUI Webapp 的處理方案:

index.js

// 去除模塊緩存
window.loader = bui.loader({
    cache: false
})

在路由初始化以前,先去掉模塊的緩存, 這樣每次進入頁面,都會是一個新的腳本, 也就沒有緩存問題了.

後退頁面刷新

問題描述: 跟前面的緩存有點關係,正常web頁面第一次加載之後就會被緩存下來, 因此你想要後退並刷新,那是很差處理的.

BUI Webapp 的處理方案:

// 方案: 後退全局刷新
router.back({
    callback: function(){
        router.refresh()
    }
})

後退局部刷新

問題描述: 若是說後退刷新還比較簡單,那若是頁面須要局部刷新呢, 客戶就不想出現閃白.

BUI Webapp 的處理方案:

// 方案: 後退局部刷新
router.back({
    callback: function(mod){
        // mod爲後退之後頁面拋出來的模塊. 你能夠自定義你的局部方法處理.
        mod.init()
    }
})

後退多層刷新

問題描述: 比方當前路由狀態: 首頁->列表頁->表單頁->成功失敗-->列表頁, 成功失敗頁之後要跳回列表頁.

BUI Webapp 的處理方案:

// 方案: 後退2層刷新
router.back({
    index: -2,
    callback: function(mod){
        // mod爲後退之後當前頁面拋出來的list模塊. 你能夠自定義你的刷新處理.
        mod.init()
    }
})

後退到指定頁面

問題描述: 當你的頁面有多個入口,入口的層級不一致, 經過索引後退的方式就不能用了,
比方表單頁, 入口1: 首頁->列表頁->表單頁 入口2: 首頁->表單頁, 這時表單頁的後退怎樣才能後退到首頁?

BUI Webapp 的處理方案:

// 方案: 經過指定模塊名後退,模塊名默認爲頁面的路徑. `main` 則爲首頁已經聲明的默認模塊.
router.back({
    name: "main",
    callback: function(mod){
        // mod爲後退之後當前頁面拋出來的模塊. 你能夠自定義你的刷新處理.
        mod.init()
    }
})

後退指定頁面並指定第幾個TAB

問題描述: 首頁底部有5個TAB, 我在表單頁後退的時候,想後退到首頁第4個tab-購物車 .

BUI Webapp 的處理方案:
main.js

loader.define(function(){
    var pageview = {};
    // slide 控件爲BUI的TAB選項卡
    pageview.slide = bui.slide();
    pageview.init = function(){}
    
    pageview.init();
    
    // 拋出main模塊的方法
    return pageview;
})

form.js

// 方案: 經過指定模塊名後退,模塊名默認爲頁面的路徑. `main` 則爲首頁已經聲明的默認模塊.
router.back({
    name: "main",
    callback: function(mod){
        // mod爲後退之後當前頁面拋出來的main模塊. 拿到slide調用控件的to方法,索引從0開始.
        mod.slide.to(2);
    }
})

物理按鍵後退刷新

問題描述: 開發移動webapp少不了要對移動物理按鍵的監聽,經過上面的方案咱們能夠實現按鈕點擊的時候後退刷新, 而用戶若是點擊的是安卓的物理後退按鍵呢?

BUI Webapp 的處理方案: 經過在首頁監聽全局後退事件處理.

index.js

router.on("back",function(e){
    var nowPid = e.target.pid,
        prevPid = e.prevTarget.pid;
    // 若是後退到首頁則刷新    
    if( nowPid === "main" ){
        // 加載首頁模塊的方法
        loader.require(nowPid,function(mod){
            mod.init();
        })
    }
    
})

蘋果微信的底部導航條遮擋

問題描述: 首頁底部有4個TAB,當點擊進入第2個頁面的時候, 若是第2個頁面也有TAB, 會被微信底部的工具欄遮擋, 這是蘋果版微信獨有的.

BUI Webapp 的處理方案: 這個坑是由於歷史記錄引發的, 針對IOS的路由初始化時去除歷史紀錄.

index.js

bui.ready(function () {
    // IOS版的微信,不須要同步歷史記錄
    var needHistory = bui.platform.isIos() && bui.platform.isWeiXin() ? false : true;
    // 初始化路由
    router.init({
        id: "#bui-router",
        syncHistory: needHistory,
    })
})

頁面跳轉到指定TAB

問題描述: A頁面有2個按鈕, 點擊分別跳轉到B頁面的2個TAB選項卡.

BUI Webapp 的處理方案:

A.js

$("#btn1").on("click",function(){
    bui.load({
        url: "pages/b.html",
        param: {
            index: 0
        }
    })
})

$("#btn2").on("click",function(){
    bui.load({
        url: "pages/b.html",
        param: {
            index: 1
        }
    })
})

B.js

// 接收頁面傳過來的參數
var param = router.getPageParams();
// 初始化選項卡在第幾個
var slide = bui.slide({
    index: param.index || 0,
    ...
})

更多吐槽

歡迎一塊兒吐槽你遇到過的變態需求!!

關於BUI Webapp

BUI Webapp是一個基於Zeptojs或jQuery的UI交互框架, 專一Webapp開發, 提供豐富的組件,靈活的定製,超多的模板及參考案例, 幫助開發者快速構建Webapp, 最終能夠在瀏覽器,微信公衆號運行,以及結合Dcloud,ApiCloud,Appcan 等第三方平臺打包成 Hybrid App, 完美適配, 一次開發, 多端運行, 並保持一致體驗.