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

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

以往文章:

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

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

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

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

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

點擊觀看視頻實錄

安裝完以下環(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ù)覽

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: {},
    //如果分頁的字段名不一樣,通過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 用來跟結(jié)構(gòu)綁定

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

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

height 列表的高度

page 從第幾頁開始請求

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

field 字段映射

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

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

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

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

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

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

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

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

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

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

{
  data: [{
    uid: 6801,
    name: "和再團之較",
    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: "式始眾組月他政例了部自革每往子。但本活又己交給音長爭標識我。八說前它特用達圓是路看江才。開次他爭從點軍容給油很出。成育料技所心并精北酸間辦元。除現(xiàn)七團一歷積動兩水礦花始線黨黨她。"
  }],
  info: "獲取成功",
  status: 0
}

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

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

field 字段配置

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

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

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

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

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

{
  result: {
      data: [{
        uid: 6801,
        name: "和再團之較",
        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: "式始眾組月他政例了部自革每往子。但本活又己交給音長爭標識我。八說前它特用達圓是路看江才。開次他爭從點軍容給油很出。成育料技所心并精北酸間辦元。除現(xiàn)七團一歷積動兩水礦花始線黨黨她。"
    }],
  },
  info: "獲取成功",
  status: 0
}

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

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

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

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

對于接口的請求必須返回數(shù)組才能操作, 非數(shù)組請使用 bui.scroll 控件;

如果高度自動計算不準確, 需要自行計算好告訴它;

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