成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

微信Webapp開(kāi)發(fā)的各種{{BANNED}}路由需求及解決辦法!

laoLiueizo / 1523人閱讀

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

前言

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

調(diào)試緩存

問(wèn)題描述: 微信打開(kāi)的web頁(yè)面默認(rèn)是會(huì)緩存的,這是為了加載更快,本來(lái)是好事,但對(duì)于用來(lái)調(diào)試的我們就比較痛苦了,每每更改一些js,html, 刷新以后,怎么樣都去不掉.

解決辦法: 每次修改html 在后面增加? 參數(shù), 每次修改js, 在頁(yè)面引入的時(shí)候, 增加問(wèn)號(hào)加時(shí)間戳的方式..但依然很痛苦.

BUI Webapp 的處理方案:

index.js

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

在路由初始化之前,先去掉模塊的緩存, 這樣每次進(jìn)入頁(yè)面,都會(huì)是一個(gè)新的腳本, 也就沒(méi)有緩存問(wèn)題了.

后退頁(yè)面刷新

問(wèn)題描述: 跟前面的緩存有點(diǎn)關(guān)系,正常web頁(yè)面第一次加載以后就會(huì)被緩存下來(lái), 所以你想要后退并刷新,那是不好處理的.

BUI Webapp 的處理方案:

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

問(wèn)題描述: 如果說(shuō)后退刷新還比較簡(jiǎn)單,那如果頁(yè)面需要局部刷新呢, 客戶就不想出現(xiàn)閃白.

BUI Webapp 的處理方案:

// 方案: 后退局部刷新
router.back({
    callback: function(mod){
        // mod為后退以后頁(yè)面拋出來(lái)的模塊. 你可以自定義你的局部方法處理.
        mod.init()
    }
})
后退多層刷新

問(wèn)題描述: 比方當(dāng)前路由狀態(tài): 首頁(yè)->列表頁(yè)->表單頁(yè)->成功失敗-->列表頁(yè), 成功失敗頁(yè)以后要跳回列表頁(yè).

BUI Webapp 的處理方案:

// 方案: 后退2層刷新
router.back({
    index: -2,
    callback: function(mod){
        // mod為后退以后當(dāng)前頁(yè)面拋出來(lái)的list模塊. 你可以自定義你的刷新處理.
        mod.init()
    }
})
后退到指定頁(yè)面

問(wèn)題描述: 當(dāng)你的頁(yè)面有多個(gè)入口,入口的層級(jí)不一致, 通過(guò)索引后退的方式就不能用了,
比方表單頁(yè), 入口1: 首頁(yè)->列表頁(yè)->表單頁(yè) 入口2: 首頁(yè)->表單頁(yè), 這時(shí)表單頁(yè)的后退怎樣才能后退到首頁(yè)?

BUI Webapp 的處理方案:

// 方案: 通過(guò)指定模塊名后退,模塊名默認(rèn)為頁(yè)面的路徑. `main` 則為首頁(yè)已經(jīng)聲明的默認(rèn)模塊.
router.back({
    name: "main",
    callback: function(mod){
        // mod為后退以后當(dāng)前頁(yè)面拋出來(lái)的模塊. 你可以自定義你的刷新處理.
        mod.init()
    }
})
后退指定頁(yè)面并指定第幾個(gè)TAB

問(wèn)題描述: 首頁(yè)底部有5個(gè)TAB, 我在表單頁(yè)后退的時(shí)候,想后退到首頁(yè)第4個(gè)tab-購(gòu)物車(chē) .

BUI Webapp 的處理方案:
main.js

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

form.js

// 方案: 通過(guò)指定模塊名后退,模塊名默認(rèn)為頁(yè)面的路徑. `main` 則為首頁(yè)已經(jīng)聲明的默認(rèn)模塊.
router.back({
    name: "main",
    callback: function(mod){
        // mod為后退以后當(dāng)前頁(yè)面拋出來(lái)的main模塊. 拿到slide調(diào)用控件的to方法,索引從0開(kāi)始.
        mod.slide.to(2);
    }
})
物理按鍵后退刷新

問(wèn)題描述: 開(kāi)發(fā)移動(dòng)webapp少不了要對(duì)移動(dòng)物理按鍵的監(jiān)聽(tīng),通過(guò)上面的方案我們可以實(shí)現(xiàn)按鈕點(diǎn)擊的時(shí)候后退刷新, 而用戶如果點(diǎn)擊的是安卓的物理后退按鍵呢?

BUI Webapp 的處理方案: 通過(guò)在首頁(yè)監(jiān)聽(tīng)全局后退事件處理.

index.js

router.on("back",function(e){
    var nowPid = e.target.pid,
        prevPid = e.prevTarget.pid;
    // 如果后退到首頁(yè)則刷新    
    if( nowPid === "main" ){
        // 加載首頁(yè)模塊的方法
        loader.require(nowPid,function(mod){
            mod.init();
        })
    }
    
})
蘋(píng)果微信的底部導(dǎo)航條遮擋

問(wèn)題描述: 首頁(yè)底部有4個(gè)TAB,當(dāng)點(diǎn)擊進(jìn)入第2個(gè)頁(yè)面的時(shí)候, 如果第2個(gè)頁(yè)面也有TAB, 會(huì)被微信底部的工具欄遮擋, 這是蘋(píng)果版微信獨(dú)有的.

BUI Webapp 的處理方案: 這個(gè)坑是因?yàn)闅v史記錄引起的, 針對(duì)IOS的路由初始化時(shí)去除歷史紀(jì)錄.

index.js

bui.ready(function () {
    // IOS版的微信,不需要同步歷史記錄
    var needHistory = bui.platform.isIos() && bui.platform.isWeiXin() ? false : true;
    // 初始化路由
    router.init({
        id: "#bui-router",
        syncHistory: needHistory,
    })
})
頁(yè)面跳轉(zhuǎn)到指定TAB

問(wèn)題描述: A頁(yè)面有2個(gè)按鈕, 點(diǎn)擊分別跳轉(zhuǎn)到B頁(yè)面的2個(gè)TAB選項(xiàng)卡.

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

// 接收頁(yè)面?zhèn)鬟^(guò)來(lái)的參數(shù)
var param = router.getPageParams();
// 初始化選項(xiàng)卡在第幾個(gè)
var slide = bui.slide({
    index: param.index || 0,
    ...
})
更多吐槽

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

關(guān)于BUI Webapp

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95961.html

相關(guān)文章

  • 一張腦圖看懂BUI Webapp移動(dòng)快速開(kāi)發(fā)框架【下】--快速入門(mén)指引

    摘要：例如改成例如改成以上兩種開(kāi)發(fā)方式都可以結(jié)合原生平臺(tái)打包成獨(dú)立應(yīng)用。 繼上一篇一張腦圖看懂BUI Webapp移動(dòng)快速開(kāi)發(fā)框架【上】--框架與工具、資源 大綱 在線查看大綱 思路更佳清晰 1. 框架設(shè)計(jì) 框架介紹 簡(jiǎn)介 BUI 是用來(lái)快速構(gòu)建界面交互的UI交互框架, 專(zhuān)注webapp開(kāi)發(fā), 開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)的開(kāi)發(fā), 界面的布局及交互交給BUI, 開(kāi)發(fā)出來(lái)的應(yīng)用, 可以嵌入平臺(tái) ( Li...

    hzx 評(píng)論0 收藏0

  • 一張腦圖看懂BUI Webapp移動(dòng)快速開(kāi)發(fā)框架【上】--框架與工具、資源

    摘要：后續(xù)我們還會(huì)增加一些實(shí)戰(zhàn)類(lèi)的移動(dòng)開(kāi)發(fā)案例，歡迎關(guān)注專(zhuān)欄。進(jìn)入官網(wǎng)新版預(yù)覽在線預(yù)覽需要使用開(kāi)啟設(shè)備模擬，效果更佳。 前言 之前寫(xiě)過(guò)一篇 2018開(kāi)發(fā)最快的Webapp框架--BUI交互框架 ，如果你還沒(méi)看過(guò)，可以簡(jiǎn)單看一下，主要介紹了BUI的基本功能，有多少控件，以及實(shí)現(xiàn)的思路，BUI 1.5版本以后變化很大，統(tǒng)一新的風(fēng)格，新的規(guī)范750，新增基于Dom的數(shù)據(jù)驅(qū)動(dòng)，完善了頁(yè)面的生命周期等...

    wuyumin 評(píng)論0 收藏0

  • 好快, 1分鐘開(kāi)發(fā)好一個(gè)下拉刷新,滾動(dòng)加載列表

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

    wemall 評(píng)論0 收藏0

  • 好快, 1分鐘開(kāi)發(fā)好一個(gè)下拉刷新,滾動(dòng)加載列表

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

    468122151 評(píng)論0 收藏0

  • 微信小程序開(kāi)發(fā)中遇到的問(wèn)題及解決辦法（三）

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

    Lowky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<