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

歡迎關注BUI Webapp專欄 或者 bui神速微信公眾號.

以往文章:

2019開發最快的Webapp框架--BUI交互框架

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

【BUI實戰篇】BUI數據驅動做的拼圖游戲 Webapp移動適配版，基于vuejs拼圖游戲改造

webapp結合Dcloud平臺打包圖文教程

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

點擊觀看視頻實錄

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

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

如何安裝使用buijs?

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

如何安裝使用bui-fast?

打開跨域的chrome瀏覽器;

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

1.創建Webapp工程

buijs create demo

2.安裝依賴

cd demo/

npm install

windows 推薦使用淘寶的 cnpm install

3.運行預覽

npm run dev

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

xxx 假設為控件名

生成規則1:

在html里, 使用 ui-xxx 生成控件結構

ui-list

生成以下結構

在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;
    }
});

常用參數說明:

id 用來跟結構綁定

url 數據請求的地址

data 數據請求需要

height 列表的高度

page 從第幾頁開始請求

pageSize 要返回多少條數據

field 字段映射

template 根據返回的數據, 渲染自定義模板,支持es6模板

callback 為每一行添加一個點擊事件,比方點擊跳轉

onRefresh 下拉刷新的時候觸發回調

onLoad 上拉滾動到底部的時候觸發回調

滾動的第一要素就是高度, 當內容撐出容器的高度,才會產生滾動條, 才能監聽id的滾動事件, 可以知道是否已經滾動到底部, 到底部則自動發起新一頁的請求.

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

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

我們來看一下這個接口返回的數據是什么?

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

這個是淘寶的mock模擬接口,隨機返回數據, 返回一個 {data:[],info:"",status:""} 結構的數據.

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

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

我們來看看有沒有漏了什么參數?

field 字段配置

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

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

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

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

如果返回的數據是嵌套多個層級呢? 比如返回

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

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

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

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

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

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

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

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