HBuilder开发App教程07-列表页

1.jpg

说明

接着上节的内容,本节讲首页的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

上一节只实现了index.html的页面部分,也就是html部分,这里讲下js部分,只讲js加载list页面部分,

2.png

原谅我又变换了文件结构,不用着急,最后会开源,可能之后还会改变,

上图是上节讲到的页面结构,这里从index.js开始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 初始化
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.subpages

subpages是一个js对象数组,每个对象都是一个子页面,对象形式:

1
2
3
4
5
6
7
8
9
10
11
12
{       
    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

4.plusready

上面说到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键值(用到本地存储)


list.html

页面源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// 初始化
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*框架。


ok

到现在,整个首页算是初步完整了,想想:

1.index.html

入口页面,只有一个头,或者头和底部,加载其他页面

2.list.html

首页的主体部分,读取websql,显示数据

3.看看本文顶部的效果吧。