標籤：
說明接著上節的內容，本節講首頁的list頁面，
如果看過上一節你就會明白“首頁”是由只有頭部的index頁面和列表list頁面組成的，
本節涉及到：
1.幾種頁面的開啟檔案
2.websql的應用
3.頁面內容的載入
4.頁面實現
如果看過以前的章節你會明白，在Hbuilder，mui中需要放棄href跳轉，
而專用mui內建的頁面開啟檔案，為什嗎？請瀏覽：http://ask.dcloud.net.cn/article/122
這裡大概講一下，詳細講解請關注下一節，
1.open方式這種方式簡單粗暴，直接open一個頁面
2.preload方式這種方式會提前載入好頁面，當你需要顯示的時候只需要show一下，避免了等待和卡頓
3.subpages方式這是子頁面方式，首頁的index.html+list.html就是這種方式，子頁面還用來實現下拉重新整理和上拉載入
上一節只實現了index.html的頁面部分，也就是html部分，這裡講下js部分，只講js載入list頁面部分，
原諒我又變換了檔案結構，不用著急，最後會開源，可能之後還會改變，
是上節講到的頁面結構，這裡從index.js開始
// 初始化mui.init({ subpages : [qiao.h.normalPage(‘list‘)]});var main = null;var showMenu = false;var menu = null;var add = null;var detail = null;// 所有方法都放到這裡mui.plusReady(function(){ // 初始化資料庫 initDb();});// 初始化資料庫function initDb(){ var db = qiao.h.db(); qiao.h.update(db, ‘create table if not exists t_plan_day_todo (id unique, plan_title, plan_content)‘); qiao.h.update(db, ‘create table if not exists t_plan_day_done (id unique, plan_title, plan_content)‘); var help = qiao.h.getItem(‘help‘); if(!help){ qiao.h.insertItem(‘help‘, ‘first‘); }}1.mui.init
以後你會看到所有頁面開頭都有這個東西，這個東西必不可少，頁面初始化，
有很多用處，子頁面，預先載入，各種設定等等，這裡只用到了子頁面，也就是list.html頁面
2.subpagessubpages是一個js對象數組，每個對象都是一個子頁面，對象形式：
{ url:your-subpage-url,//子頁面HTML地址，支援本地地址和網路地址 id:your-subpage-id,//子頁面標誌 styles:{ top:subpage-top-position,//子頁面頂部位置 bottom:subpage-bottom-position,//子頁面底部位置 、 width:subpage-width,//子頁面寬度，預設為100% height:subpage-height,//子頁面高度，預設為100% ...... }, extras:{}//額外擴充參數 }
其中url是頁面的地址，你可以寫本地的，也可以寫線上的，本例中是list.html
id是標誌，以後你要在其他頁面擷取list頁面都靠這個id，
styles，是這個頁面整體的樣式，比如高寬，比如距離頂部，底部的距離，本例中因為index.html已經佔用了頭部，所以top會空開。
3.對象文檔看到這裡是不是會疑惑，這些頁面對象，頁面樣式對象，到底有哪些屬性，哪些方法，
難道一定要在官網例子中去找，太費勁了吧，
其實所有的mui中的對象都是nativejs中的對象，這裡用到兩個：
webview：http://www.dcloud.io/docs/api/zh_cn/webview.html
webviewstyle：http://www.dcloud.io/docs/api/zh_cn/webview.html#plus.webview.WebviewStyle
上面說到mui是ui+對nativejs一部分的封裝，
而nativejs想要調用都需要等待nativejs完成，在mui中就是mui.plusready，
基本上每個頁面中的最外層的方法就一個mui.init負責初始化，一個mui.plusready負責頁面方法執行
5.初始化資料庫上面介紹了這麼多，其實index.js在這裡只做了兩件事情，
一件是mui.init中初始化了子頁面list.html，
一件是mui.plusready中初始化資料庫
6.資料存放區要做一個app，既然少不了資料存放區，
如果僅是本地app那使用本機存放區，websql足以；
如果是連網的app，則可以mui.ajax去請求。
本教程針對本地app，使用本機存放區和websql，
在index.js的最後可以看到help相關的內容，
大概是，如果本地沒有help則建立help，如果有則不操作。
websql可以詳見這裡：http://uikoo9.com/book/chapterDetail/5
7.源碼看到這裡是不是被index.js中的一些封裝嚇到了，其實很簡單，這裡是源碼。
現在停下來想想過程，
app開啟——載入index.html——載入index.js
通過mui.init載入list.html子頁面
通過mui.plusready初始化資料庫（用到websql）
在app第一次啟動的時候寫入本地help=first鍵值（用到本機存放區）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <!-- mui --> <link type="text/css" rel="stylesheet" href="@/css/mui.min.css"/> <script type="text/javascript" src="@/js/mui.min.js"></script> </head> <body> <div class="mui-content"> <ul class="mui-table-view" style="margin-top:0;display:none;" id="todolist"></ul> </div> <!-- jquery --> <script type="text/javascript" src="@/js/lib/jquery-1.11.2.min.js"></script> <!-- qiao.js --> <script type="text/javascript" src="@/js/lib/qiao.js"></script> <!-- app --> <script type="text/javascript" src="@/js/app/list.js"></script> </body></html>
是不是發現和index.html大同小異了，不同的是這裡用到了mui中的列表組件，可以在這裡找到它。
js源碼// 初始化mui.init({});var tapId = null;// 所有的方法都放到這裡mui.plusReady(function(){ // 擷取列表 initHelp();});function initHelp(){ var help = qiao.h.getItem(‘help‘); if(help == ‘first‘){ qiao.h.update(qiao.h.db(), getSql(1, ‘事項5‘, ‘待辦事項5‘)); qiao.h.update(qiao.h.db(), getSql(2, ‘事項4‘, ‘待辦事項4‘)); qiao.h.update(qiao.h.db(), getSql(3, ‘事項3‘, ‘待辦事項3‘)); qiao.h.update(qiao.h.db(), getSql(4, ‘事項2‘, ‘待辦事項2‘)); qiao.h.update(qiao.h.db(), getSql(5, ‘事項1‘, ‘待辦事項1‘)); qiao.h.update(qiao.h.db(), getSql(6, ‘功能8‘, ‘退出程式‘)); qiao.h.update(qiao.h.db(), getSql(7, ‘功能7‘, ‘右滑菜單‘)); qiao.h.update(qiao.h.db(), getSql(8, ‘功能6‘, ‘左上方查看完成事項‘)); qiao.h.update(qiao.h.db(), getSql(9, ‘功能5‘, ‘右上方添加待辦事項‘)); qiao.h.update(qiao.h.db(), getSql(10, ‘功能4‘, ‘長按待辦事項可以刪除‘)); qiao.h.update(qiao.h.db(), getSql(11, ‘功能3‘, ‘右滑待辦事項可以完成‘)); qiao.h.update(qiao.h.db(), getSql(12, ‘功能2‘, ‘點擊待辦事項可以查看詳情‘)); qiao.h.update(qiao.h.db(), getSql(13, ‘功能1‘, ‘首頁顯示待辦事項清單‘)); qiao.h.insertItem(‘help‘,‘notfirst‘); } initList();}function getSql(index, title, content){ return ‘insert into t_plan_day_todo (id, plan_title, plan_content) values (‘ + index + ‘, "‘ + title + ‘", "‘ + content + ‘")‘;}// 初始化待辦事項function initList(){ var $ul = $(‘#todolist‘).empty(); qiao.h.query(qiao.h.db(), ‘select * from t_plan_day_todo order by id desc‘, function(res){ for (i = 0; i < res.rows.length; i++) { $ul.append(genLi(res.rows.item(i))); } showList($ul); });}function genLi(data){ var id = data.id; var title = data.plan_title; var content = data.plan_content; var li = ‘<li class="mui-table-view-cell" id="todoli_‘ + id + ‘" data-id="‘ + id + ‘">‘ + ‘<div class="mui-slider-right mui-disabled">‘ + ‘<a class="mui-btn mui-btn-red doneBtn">完成</a>‘ + ‘</div>‘ + ‘<div class="mui-slider-handle">‘ + ‘<div class="mui-media-body">‘ + title + ‘<p class="mui-ellipsis">‘+content+‘</p>‘ + ‘</div>‘ + ‘</div>‘ + ‘</li>‘; return li;}function showList(ul){ if(ul.find(‘li‘).size() > 0 && ul.is(‘:hidden‘)) ul.show(); }
可以看到js中只做了兩件事情：
1.初始化一些資料
用index頁面添加到本機存放區的help=first做判斷，如果是第一次啟動app就初始化一些資料，
然後用websql給表中添加了一些資料
2.擷取資料並顯示
每次進入list頁面都回去websql中讀取資料，並用jquery拼裝好放到頁面上，
這裡用jq簡單的拼裝，沒有引入其他複雜的js模版，js mv*架構。
到現在，整個首頁算是初步完整了，想想：
1.index.html
入口頁面，只有一個頭，或者頭和底部，載入其他頁面
2.list.html
首頁的主體部分，讀取websql，顯示資料
3.看看本文頂部的效果吧。
HBuilder開發App教程：http://uikoo9.com/book/detail/3
更多學習筆記：http://uikoo9.com/book
著作權聲明：本文為博主原創文章，未經博主允許不得轉載。
HBuilder開發App教程07-列表頁
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
