原文鏈接: https://segmentfault.com/a/1190000015493097
前言
最近在使用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, 完美適配, 一次開發, 多端運行, 並保持一致體驗.
閱讀更多 前端小學生 的文章
