BUI 多頁路由

上一節(jié) 我們用最簡單的方式,創(chuàng)建了一個index.html, 當(dāng)我們創(chuàng)建了多個頁面以后, 就需要頁面跳轉(zhuǎn)了.

多頁路由簡單, 跟以前PC的開發(fā)方式是一致的, 利用瀏覽器的歷史記錄來解決頁面之間的前進,后退,傳參問題. 可以用于各種PHP框架的模板.

注意, 多頁開發(fā)跟單頁開發(fā)用到的方法可以是一致的.

多頁開發(fā)只需直接引入對應(yīng)的腳本就可以開發(fā). 以下地址為cdn地址,僅用于測試.

  <link rel="stylesheet"  rel="external nofollow" target="_blank"  />
  <!-- bui.js 依賴于Zepto或jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/buijs/lib/zepto.js" rel="external nofollow" ></script>
  <script src="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.js" rel="external nofollow" ></script>

頁面跳轉(zhuǎn)

頁面跳轉(zhuǎn)有2種: bui.btn(綁定靜態(tài)屬性href跳轉(zhuǎn)) 跟 bui.load(動態(tài)跳轉(zhuǎn))

• 靜態(tài)屬性跳轉(zhuǎn),含有屬性 href 則會調(diào)用跳轉(zhuǎn)頁面操作;
• 動態(tài)跳轉(zhuǎn), 需要自己綁定按鈕跳轉(zhuǎn)操作;

1. bui.btn(option) 靜態(tài)屬性綁定

參數(shù): option是一個對象

option.id

• Type: string
• Detail: 父層選擇器

option.handle

• Type: string
• Detail: 要點擊的目標(biāo)

option.progress

• Type: boolean
• Detail: 是否開啟進度條

綁定.bui-page 結(jié)構(gòu)中 .bui-btn, a, 如果含有 href 屬性則會跳轉(zhuǎn). bui.btn API

• 多頁開發(fā):一個頁面綁定一次.
• 單頁開發(fā):只在首頁綁定一次.

示例:

<div class="bui-page">
  <div class="bui-btn" href="pages/page2/page2.html">普通跳轉(zhuǎn)</div>
  <div class="bui-btn" href="pages/page2/page2.html?id=page1">傳參跳轉(zhuǎn)</div>
</div>

// .bui-page 下的所有bui-btn按鈕帶href屬性,點擊會調(diào)用 bui.load 跳轉(zhuǎn).
bui.btn({id:".bui-page",handle:".bui-btn"}).load();

這里為什么還要初始化bui.btn,不直接使用a鏈接跳轉(zhuǎn)呢? 通過bui.btn綁定對連續(xù)快速點擊做了處理, 防止多次跳轉(zhuǎn).

2. bui.load(option) 動態(tài)跳轉(zhuǎn)

傳參的時候比較方便 bui.load API

參數(shù): option是一個對象

option.url

• Type: string
• Detail: 相對路徑

option.param

• Type: object
• Detail: 傳給目標(biāo)頁面的參數(shù)

option.replace

• Type: boolean
• Detail: 替換頁面,默認:false

page1.html 示例:

<div id="btnGo" class="bui-btn">點擊跳轉(zhuǎn)</div>;

// 綁定按鈕跳轉(zhuǎn)
$("#btnGo").on("click",function(e){
  bui.load({ url: "pages/page2.html", param: { id: "page1"} });
})

接收參數(shù)

bui.getPageParams()

頁面接收參數(shù), 這里參數(shù)的值是在回調(diào)里面, 部分原生參數(shù)的接收是異步的, 這是為了保持接收參數(shù)的方式統(tǒng)一 bui.getPageParams API

page2.html 示例:

var getParams = bui.getPageParams();
    getParams.done(function(result){
        console.log(result);
        // {id:"page2"}
    })

頁面后退

bui.back(option)

后退頁面 bui.back API

參數(shù): option是一個對象

option.callback

• Type: function
• Detail: 后退以后執(zhí)行回調(diào)

示例:

bui.back();

webapp版的多頁開發(fā)不支持后退刷新等操作. 如果需要更復(fù)雜的路由定制, 就需要以單頁開發(fā), 自由度會更高.

頁面刷新

bui.refresh()

刷新頁面 bui.refresh API

示例:

bui.refresh();

頁面替換

bui.load(option)

頁面替換不會有歷史記錄 bui.load API

示例:

bui.load({ url: "pages/page2.html", replace:true });

bui.ready

設(shè)備準(zhǔn)備完畢, 一個頁面只需要一個 bui.ready, 里面可以執(zhí)行$的方法.

  bui.ready(function(){
    // 執(zhí)行
  })

注意, 以上的使用方式都需要在bui.ready的回調(diào)里面, $ 選擇器指 Zepto跟jQuery通用的方法.

使用原生方法

## 創(chuàng)建 dcloud 平臺版本
$ buijs create -p dcloud

在bui.ready上面加入一個bui.isWebapp = false; 的配置項, 運行在 bui.ready 里面的綜合方法, bui.load,bui.back,bui.getPageparams 等等, 都會采用原生的處理. Yes, 就是這么簡單! 1.5.x以后 bui.ajax, bui.upload 的切換需要通過 {needNative:true} 參數(shù)來進行切換.

bui.isWebapp = false;

啟用原生以后,Chrome無法調(diào)試, 需要在dcloud或者對應(yīng)的平臺容器上才能調(diào)試..

接下來可以繼續(xù)學(xué)習(xí)

• 數(shù)據(jù)交互