摘要：但本活又己交給音長(zhǎng)爭(zhēng)標(biāo)識(shí)我。八說前它特用達(dá)圓是路看江才。開次他爭(zhēng)從點(diǎn)軍容給油很出。成育料技所心并精北酸間辦元。除現(xiàn)七團(tuán)一歷積動(dòng)兩水礦花始線黨黨她。

歡迎關(guān)注BUI Webapp專欄 或者 bui神速微信公眾號(hào).

以往文章:

2019開發(fā)最快的Webapp框架--BUI交互框架

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

【BUI實(shí)戰(zhàn)篇】BUI數(shù)據(jù)驅(qū)動(dòng)做的拼圖游戲 Webapp移動(dòng)適配版，基于vuejs拼圖游戲改造

webapp結(jié)合Dcloud平臺(tái)打包圖文教程

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

點(diǎn)擊觀看視頻實(shí)錄

安裝完以下環(huán)境后, 從0到1, 手把手教, 你也可以做到!

安裝buijs cli命令行工具(需要先安裝node環(huán)境, 建議使用node 8.x);

如何安裝使用buijs?

安裝bui-fast 快速編輯器插件(推薦vscode);

如何安裝使用bui-fast?

打開跨域的chrome瀏覽器;

如何打開跨域的Chrome瀏覽器?

1.創(chuàng)建Webapp工程

buijs create demo

2.安裝依賴

cd demo/

npm install

windows 推薦使用淘寶的 cnpm install

3.運(yùn)行預(yù)覽

npm run dev

視頻里使用的是vscode 可以在安裝插件那里找到 bui-fast.

xxx 假設(shè)為控件名

生成規(guī)則1:

在html里, 使用 ui-xxx 生成控件結(jié)構(gòu)

ui-list

生成以下結(jié)構(gòu)

在js里, 使用 bui-xxx 生成控件的初始化代碼

bui-list

生成以下初始化代碼

// 列表控件 js 初始化:
var uiList = bui.list({
    id: "#uiList",
    url: "http://rap2api.taobao.org/app/mock/84605/example/getNews",
    pageSize: 5,
    data: {},
    //如果分頁(yè)的字段名不一樣,通過field重新定義
    field: {
        page: "page",
        size: "pageSize",
        data: "data"
    },
    callback: function(e) {},
    template: function(data) {
        var html = "";
        data.forEach(function(el, index) {

            html += `

                

                

                    
${el.name}
                    
${el.address}
                    
${el.distance}公里
                
                ￥${el.price}
            
`
        });

        return html;
    }
});

常用參數(shù)說明:

id 用來(lái)跟結(jié)構(gòu)綁定

url 數(shù)據(jù)請(qǐng)求的地址

data 數(shù)據(jù)請(qǐng)求需要

height 列表的高度

page 從第幾頁(yè)開始請(qǐng)求

pageSize 要返回多少條數(shù)據(jù)

field 字段映射

template 根據(jù)返回的數(shù)據(jù), 渲染自定義模板,支持es6模板

callback 為每一行添加一個(gè)點(diǎn)擊事件,比方點(diǎn)擊跳轉(zhuǎn)

onRefresh 下拉刷新的時(shí)候觸發(fā)回調(diào)

onLoad 上拉滾動(dòng)到底部的時(shí)候觸發(fā)回調(diào)

滾動(dòng)的第一要素就是高度, 當(dāng)內(nèi)容撐出容器的高度,才會(huì)產(chǎn)生滾動(dòng)條, 才能監(jiān)聽id的滾動(dòng)事件, 可以知道是否已經(jīng)滾動(dòng)到底部, 到底部則自動(dòng)發(fā)起新一頁(yè)的請(qǐng)求.

這里我們需要解決的第一個(gè)問題,就是高度, 所以我們可以傳height參數(shù),默認(rèn)是0, 為0,則會(huì)自動(dòng)計(jì)算列表的頁(yè)面剩余高度.

有了高度以后, 我們要計(jì)算請(qǐng)求返回的數(shù)據(jù)能不能撐開容器, 如果不行, 則自動(dòng)請(qǐng)求下一頁(yè), 直到容器被撐開, 所以你會(huì)看到pageSize 設(shè)置的值較小的時(shí)候, 頁(yè)面會(huì)發(fā)起第2次請(qǐng)求, 就是這個(gè)原因.

我們來(lái)看一下這個(gè)接口返回的數(shù)據(jù)是什么?

http://rap2api.taobao.org/app/mock/84605/example/getNews

這個(gè)是淘寶的mock模擬接口,隨機(jī)返回?cái)?shù)據(jù), 返回一個(gè) {data:[],info:"",status:""} 結(jié)構(gòu)的數(shù)據(jù).

{
  data: [{
    uid: 6801,
    name: "和再團(tuán)之較",
    image: "http://dummyimage.com/200x134/4A7BF7&text=Thumbnail",
    phone: "17612327699",
    location: "惠城區(qū)",
    price: "65",
    distance: "52",
    status: 1,
    date: "2003-06-28",
    url: "gopher://brcce.cq/svku",
    email: "v.dmdtjgv@rwldcexzt.bi",
    time: "20:39:53",
    address: "海南省 三沙市 西沙群島",
    detail: "式始眾組月他政例了部自革每往子。但本活又己交給音長(zhǎng)爭(zhēng)標(biāo)識(shí)我。八說前它特用達(dá)圓是路看江才。開次他爭(zhēng)從點(diǎn)軍容給油很出。成育料技所心并精北酸間辦元。除現(xiàn)七團(tuán)一歷積動(dòng)兩水礦花始線黨黨她。"
  }],
  info: "獲取成功",
  status: 0
}

那么問題來(lái)了? 不管接口的規(guī)則是后端還是前端定的, 控件并不事先知道接口的規(guī)則, 如果把規(guī)則限定死了, 那很多先開發(fā)接口再來(lái)學(xué)習(xí)移動(dòng)端開發(fā)的還會(huì)選擇bui框架嗎?

我們來(lái)看看有沒有漏了什么參數(shù)?

field 字段配置

這個(gè)就是用來(lái)做數(shù)據(jù)請(qǐng)求的字段映射, 比方, 我請(qǐng)求的接口地址是http://rap2api.taobao.org/app/mock/84605/example/getNews, 請(qǐng)求第幾頁(yè)是用的大寫 PAGES 請(qǐng)求每頁(yè)的大小 是用的 PAGESIZES; 那么 field 的配置應(yīng)該為:

{
  page: 2,
  pageSize: 20,
  field: {
    page: "PAGES",
    size: "PAGESIZES"
  }
}

那么接口就會(huì)請(qǐng)求為 http://rap2api.taobao.org/app/mock/84605/example/getNews?PAGES=2&PAGESIZES=20; 這樣接口就能正常請(qǐng)求到對(duì)應(yīng)的數(shù)據(jù)了, 那請(qǐng)求到以后的數(shù)據(jù)返回回來(lái), 怎么知道數(shù)據(jù)在什么字段呢? 同樣也是在field的 data 參數(shù)里面配置;

{
  page: 2,
  pageSize: 20,
  field: {
    page: "PAGES",
    size: "PAGESIZES",
    data: "data"
  }
}

如果返回的數(shù)據(jù)是嵌套多個(gè)層級(jí)呢? 比如返回

{
  result: {
      data: [{
        uid: 6801,
        name: "和再團(tuán)之較",
        image: "http://dummyimage.com/200x134/4A7BF7&text=Thumbnail",
        phone: "17612327699",
        location: "惠城區(qū)",
        price: "65",
        distance: "52",
        status: 1,
        date: "2003-06-28",
        url: "gopher://brcce.cq/svku",
        email: "v.dmdtjgv@rwldcexzt.bi",
        time: "20:39:53",
        address: "海南省 三沙市 西沙群島",
        detail: "式始眾組月他政例了部自革每往子。但本活又己交給音長(zhǎng)爭(zhēng)標(biāo)識(shí)我。八說前它特用達(dá)圓是路看江才。開次他爭(zhēng)從點(diǎn)軍容給油很出。成育料技所心并精北酸間辦元。除現(xiàn)七團(tuán)一歷積動(dòng)兩水礦花始線黨黨她。"
    }],
  },
  info: "獲取成功",
  status: 0
}

那么我們就要找到該數(shù)據(jù)返回的數(shù)組字段在哪里? 你可以這樣配置.

{
  page: 2,
  pageSize: 20,
  field: {
    page: "PAGES",
    size: "PAGESIZES",
    data: "result.data"
  }
}

我們操作一下剛剛生成的控件, 會(huì)看到底部有沒有更多內(nèi)容字樣, 那怎么知道是否是最后一頁(yè)了呢? 通過返回的數(shù)組大小, 跟你請(qǐng)求的每頁(yè)大小做比對(duì), 如果小余pageSize設(shè)置的值, 則認(rèn)為已經(jīng)是最后一頁(yè)了.

實(shí)際上就是把 bui.ajax+bui.scroll+bui.pullrefresh幾個(gè)控件的通用需求整合在一塊, 這樣我們就可以解決數(shù)據(jù)接口+控件整合, 又能抽離業(yè)務(wù)的一個(gè)控件. 通過簡(jiǎn)單配置,我們可以滿足很多開發(fā)需求.

對(duì)于接口的請(qǐng)求必須返回?cái)?shù)組才能操作, 非數(shù)組請(qǐng)使用 bui.scroll 控件;

如果高度自動(dòng)計(jì)算不準(zhǔn)確, 需要自行計(jì)算好告訴它;

如果是restful接口, 需要在接口設(shè)置允許這種問號(hào)傳參的形式;