微信Webapp開發的各種{{BANNED}}路由需求及解決辦法!

laoLiueizo 發布于2019-08-22 18:31 / 1514人閱讀

摘要：前言最近在使用開發的一個小商城項目在微信上遇到一些坑及{{BANNED}}需求層層深入整理一下給后來人參考一定有你還不知道的調試緩存問題描述微信打開的頁面默認是會緩存的這是為了加載更快本來是好事但對于用來調試的我們就比較痛苦了每每更改一些刷新以后怎么樣都去

前言

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

調試緩存

問題描述: 微信打開的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,
    ...
})

更多吐槽

歡迎一起吐槽你遇到過的{{BANNED}}需求!!

關于BUI Webapp

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

云服務器 GPU云服務器的解決辦法微軟的解決辦法 use的解決辦法換ip的解決辦法

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95961.html

一張腦圖看懂BUI Webapp移動快速開發框架【下】--快速入門指引

摘要：例如改成例如改成以上兩種開發方式都可以結合原生平臺打包成獨立應用。繼上一篇一張腦圖看懂BUI Webapp移動快速開發框架【上】--框架與工具、資源大綱在線查看大綱思路更佳清晰 1. 框架設計框架介紹簡介 BUI 是用來快速構建界面交互的UI交互框架, 專注webapp開發, 開發者只需關注業務的開發, 界面的布局及交互交給BUI, 開發出來的應用, 可以嵌入平臺 ( Li...

hzx 2019-08-26 10:16 評論0 收藏0
一張腦圖看懂BUI Webapp移動快速開發框架【上】--框架與工具、資源

摘要：后續我們還會增加一些實戰類的移動開發案例，歡迎關注專欄。進入官網新版預覽在線預覽需要使用開啟設備模擬，效果更佳。前言之前寫過一篇 2018開發最快的Webapp框架--BUI交互框架，如果你還沒看過，可以簡單看一下，主要介紹了BUI的基本功能，有多少控件，以及實現的思路，BUI 1.5版本以后變化很大，統一新的風格，新的規范750，新增基于Dom的數據驅動，完善了頁面的生命周期等...

wuyumin 2019-08-26 10:16 評論0 收藏0
好快, 1分鐘開發好一個下拉刷新,滾動加載列表

摘要：但本活又己交給音長爭標識我。八說前它特用達圓是路看江才。開次他爭從點軍容給油很出。成育料技所心并精北酸間辦元。除現七團一歷積動兩水礦花始線黨黨她。好快, 1分鐘寫好下拉刷新,滾動加載自動分頁列表前言歡迎關注BUI Webapp專欄或者 bui神速微信公眾號. 以往文章: 2019開發最快的Webapp框架--BUI交互框架微信Webapp開發的各種變態路由需求及解決辦法! ...

wemall 2019-08-30 15:56 評論0 收藏0
好快, 1分鐘開發好一個下拉刷新,滾動加載列表

摘要：但本活又己交給音長爭標識我。八說前它特用達圓是路看江才。開次他爭從點軍容給油很出。成育料技所心并精北酸間辦元。除現七團一歷積動兩水礦花始線黨黨她。好快, 1分鐘寫好下拉刷新,滾動加載自動分頁列表前言歡迎關注BUI Webapp專欄或者 bui神速微信公眾號. 以往文章: 2019開發最快的Webapp框架--BUI交互框架微信Webapp開發的各種變態路由需求及解決辦法! ...

468122151 2019-08-30 15:44 評論0 收藏0
微信小程序開發中遇到的問題及解決辦法（三）

摘要：資料整理關于配置微信小程序頁面附關于微信搜索小程序內頁面的功能，只能在線上環境有用，而且沒有提供測試的渠道。二微信小程序激勵視頻廣告接入微信視頻廣告指引截圖具體使用注意激勵視頻廣告組件是一個原生組件，層級比普通組件高。大綱：根據近期我在小程序開發中接到的需求，總結一下下面四個開發需求所遇到的問題： 1、關于微信現已開放小程序內搜索（sitemap 配置）；2、微信小程序的激勵視頻廣告...

Lowky 2019-08-30 11:07 評論0 收藏0