BUI 多頁(yè)路由

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

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

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

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

  <link rel="stylesheet"  rel="external nofollow" target="_blank"  />
  <!-- bui.js 依賴(lài)于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>

頁(yè)面跳轉(zhuǎn)

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

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

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

參數(shù): option是一個(gè)對(duì)象

option.id

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

option.handle

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

option.progress

• Type: boolean
• Detail: 是否開(kāi)啟進(jìn)度條

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

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

示例:

<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ǎn)擊會(huì)調(diào)用 bui.load 跳轉(zhuǎn).
bui.btn({id:".bui-page",handle:".bui-btn"}).load();

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

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

傳參的時(shí)候比較方便 bui.load API

參數(shù): option是一個(gè)對(duì)象

option.url

• Type: string
• Detail: 相對(duì)路徑

option.param

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

option.replace

• Type: boolean
• Detail: 替換頁(yè)面,默認(rèn):false

page1.html 示例:

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

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

接收參數(shù)

bui.getPageParams()

頁(yè)面接收參數(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"}
    })

頁(yè)面后退

bui.back(option)

后退頁(yè)面 bui.back API

參數(shù): option是一個(gè)對(duì)象

option.callback

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

示例:

bui.back();

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

頁(yè)面刷新

bui.refresh()

刷新頁(yè)面 bui.refresh API

示例:

bui.refresh();

頁(yè)面替換

bui.load(option)

頁(yè)面替換不會(huì)有歷史記錄 bui.load API

示例:

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

bui.ready

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

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

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

使用原生方法

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

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

bui.isWebapp = false;

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

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

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