HBuilder开发App教程10-完成事项

1.jpg

回顾

回顾一下之前的要点:

1.Hbuilder创建项目,真机调试

2.首页

3.列表页

4.侧滑菜单

5.websql

6.几种页面打开的方式

再讲下本节的要点:

1.fire方式页面间传值

2.再讲websql


完成事项

功能描述

左滑待办事项会出现完成按钮,点击按钮会将待办事项完成,并加入侧滑菜单,

过程

1.左滑出现完成按钮

2.点击按钮后将事项从待办表中删除

3.同时将事项加入完成表中

4.侧滑菜单显示完成事项

页面

涉及两个页面,一个是list,一个是menu,

为了让操作更流畅,所以在list页面只进行点击事件,然后将事件传递到menu页面,

menu页面进行,添加完成事项,移除待办事项,显示完成事项操作。

实现

左滑待办事项出现完成按钮是mui自带的组件,详见文档,list代码如下

1
2
3
4
5
6
7
8
9
10
// 完成
    qiao.on('.doneBtn''tap'function(){
        var $li = $(this).parent().parent();
        var id = $li.data('id');
        $li.remove();
        showList($('#todolist'));
         
        qiao.h.fire('menu''doneItem', {todoId:id});
        return false;
    });

list.js中只需要添加如上代码,

第一部分是获取该待办事项Li的id,然后移除Li,

第二部分是将获取的id通过fire的方式传到menu页面


websql

1.index页面初始化两个表

1
2
3
    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)');

表t_plan_day_todo用来保存list页面的待办事项,有主键,标题和内容三个属性,

表t_plan_day_done用来保存menu页面的完成事项,有主键,标题和内容三个属性。

2.qiao.h.db()

用来获取一个数据库,具体代码如下:

1
2
3
4
5
6
qiao.h.db = function(name, size){
    var db_name = name ? name : 'db_test';
    var db_size = size ? size : 2;
     
    return openDatabase(db_name, '1.0''db_test', db_size * 1024 * 1024);
};

可见默认创建了一个“db_test”的数据库,大小为2*1024*1024k

3.qiao.h.update()

更新操作,所有的增加,删除,修改以及一些不需要返回结果的sql操作,代码如下:

1
2
3
qiao.h.update = function(db, sql){
    if(db &&sql) db.transaction(function(tx){tx.executeSql(sql);});
};

4.list页面获取数据

list页面需要从t_plan_day_todo表中获取数据,并展示,代码如下:

1
2
3
4
5
6
7
8
9
10
11
// 初始化待办事项
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);
    });
}

5.qiao.h.query()

执行查询操作,需要传入回调函数操作返回的结果,代码如下:

1
2
3
4
5
6
7
8
9
qiao.h.query = function(db, sql, func){
    if(db && sql){
        db.transaction(function(tx){
            tx.executeSql(sql, [], function(tx, results) {
                func(results);
            }, null);
        });
    }
};

6.menu页面的删除添加和查询

为了app更加流畅,在list页面只移除了li元素,其他所有数据库操作都放到menu页面进行,

包括,删除todo表中的事项,添加到done表,查询done表并显示,代码如下:

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
// 初始化
mui.init({
    keyEventBind : {
        backbutton : false
    }
});
 
 
// 所有的方法都放到这里
mui.plusReady(function(){
    initDoneList();
     
    // 添加已完成事项
    window.addEventListener('doneItem', doneItemHandler);
});
 
// 初始化待办事项
function initDoneList(){
    var $ul = $('#donelist').empty();
    qiao.h.query(qiao.h.db(), 'select * from t_plan_day_done order by id desc'function(res){
        for (i = 0; i < res.rows.length; i++) {
            $ul.append(genLi(res.rows.item(i).plan_title));
        }
 
        showList($ul);
    });
}
function genLi(title){
    return '<li class="mui-table-view-cell">' + title + '</li>';
}
function showList(ul){
    if(ul.find('li').size() > 0 &&  ul.is(':hidden')) ul.show();
}
 
// 添加已完成事项
function doneItemHandler(event){
    var todoId = event.detail.todoId;
 
    var db = qiao.h.db();
    qiao.h.query(db, 'select * from t_plan_day_todo where id=' + todoId, function(res){
        if(res.rows.length > 0){
            var data = res.rows.item(0);
             
            qiao.h.query(db, 'select max(id) mid from t_plan_day_done'function(res1){
                $('#donelist').prepend('<li class="mui-table-view-cell>test</li>').prepend(genLi(data.plan_title)).show();
                 
                var id = (res1.rows.item(0).mid) ? res1.rows.item(0).mid : 0;
                qiao.h.update(db, 'insert into t_plan_day_done (id, plan_title, plan_content) values (' + (id+1) + ', "' + data.plan_title + '", "' + data.plan_content + '")');
                qiao.h.update(db, 'delete from t_plan_day_todo where id=' + todoId);
            });
        }
    });
}

首先,mui.init初始化中将后退按钮屏蔽,

其次,通过qiao.h.query查询到done表中的数据并显示,

最后,监听事件,获取todo中移除的id,

通过todoid查询到移除的todo列的title和content,

将这个title和content插入到done表中,

插入成功后删除todo表中记录。


fire

原理

上面的代码有点枯燥,但也不是很难,希望可以看懂,

看懂后你会发现将list页面的todoid传到menu页面是个问题,

这里采用了fire方式,简单的说就是,

list页面对menu页面发起一个事件,即fire,

然后menu页面监听list页面的这个事件。

qiao.h.fire()

1
2
3
qiao.h.fire = function(id, name, values){
    mui.fire(qiao.h.getPage(id), name, values);
};

这里可以看到,只是将mui.fire封装了下,只需要传入页面id,将自动获取该id对应的页面

qiao.h.getPage()

1
2
3
qiao.h.getPage = function(id){
    return id ? plus.webview.getWebviewById(id) : null;
};

通过id获取webview页面对象的封装。

list页面fire

1
qiao.h.fire('menu''doneItem', {todoId:id});

话说mui两种页面间传值的方法,一是evalJs,但是不做推荐,为啥不做推荐,请百度之,

然后就是fire的方式了,方便传值,还是比较好的。

这里是list页面对menu页面fire了。

menu页面监听

1
window.addEventListener('doneItem', doneItemHandler);

然后就可以尽情的干各种事情了。。


总结

1.websql详解

2.fire详解