HBuilder开发App教程07-列表页

/ 833 次浏览/ APP开发

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.看看本文顶部的效果吧。


<< 上一篇

HBuilder开发App教程06-首页

下一篇 >>

HBuilder开发App教程08-几种页面打开方式

相关文章