HBuilder开发App教程10-完成事项
来源:互联网 发布:谷歌娘软件 编辑:程序博客网 时间:2024/06/06 04:38
回顾
回顾一下之前的要点:
1.Hbuilder创建项目,真机调试
2.首页
3.列表页
4.侧滑菜单
5.websql
6.几种页面打开的方式
再讲下本节的要点:
1.fire方式页面间传值
2.再讲websql
完成事项
功能描述
左滑待办事项会出现完成按钮,点击按钮会将待办事项完成,并加入侧滑菜单,
过程
1.左滑出现完成按钮
2.点击按钮后将事项从待办表中删除
3.同时将事项加入完成表中
4.侧滑菜单显示完成事项
页面
涉及两个页面,一个是list,一个是menu,
为了让操作更流畅,所以在list页面只进行点击事件,然后将事件传递到menu页面,
menu页面进行,添加完成事项,移除待办事项,显示完成事项操作。
实现
左滑待办事项出现完成按钮是mui自带的组件,详见文档,list代码如下
// 完成 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页面初始化两个表
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()
用来获取一个数据库,具体代码如下:
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操作,代码如下:
qiao.h.update = function(db, sql){ if(db &&sql) db.transaction(function(tx){tx.executeSql(sql);});};
4.list页面获取数据
list页面需要从t_plan_day_todo表中获取数据,并展示,代码如下:
// 初始化待办事项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()
执行查询操作,需要传入回调函数操作返回的结果,代码如下:
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表并显示,代码如下:
// 初始化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()
qiao.h.fire = function(id, name, values){ mui.fire(qiao.h.getPage(id), name, values);};
这里可以看到,只是将mui.fire封装了下,只需要传入页面id,将自动获取该id对应的页面
qiao.h.getPage()
qiao.h.getPage = function(id){ return id ? plus.webview.getWebviewById(id) : null;};
通过id获取webview页面对象的封装。
list页面fire
qiao.h.fire('menu', 'doneItem', {todoId:id});
话说mui两种页面间传值的方法,一是evalJs,但是不做推荐,为啥不做推荐,请百度之,
然后就是fire的方式了,方便传值,还是比较好的。
这里是list页面对menu页面fire了。
menu页面监听
window.addEventListener('doneItem', doneItemHandler);
然后就可以尽情的干各种事情了。。
总结
1.websql详解
2.fire详解
更多教程:
HBuilder开发App教程:http://uikoo9.com/book/detail/3
更多学习笔记:http://uikoo9.com/book
- HBuilder开发App教程10-完成事项
- HBuilder开发App教程11-添加事项
- HBuilder开发App教程
- HBuilder开发App教程
- HBuilder开发App教程06-首页
- HBuilder开发App教程07-列表页
- HBuilder开发App
- HBuilder开发App简介
- HBuilder开发App
- HBuilder开发App 01
- hbuilder+dcloud开发APP
- HBuilder开发App教程05-滴石和websql
- HBuilder开发App教程08-几种页面打开方式
- HBuilder开发App教程09-侧滑菜单
- HBuilder开发App教程12-详情页,删除和退出
- HBuilder开发App教程13-ios调试以及发布【完结】
- HBuilder开发App教程01-推开前端开发App的大门
- 介绍hbuilder开发打包app
- java基础第九讲——反射、工厂设计模式、注解、线程、网络与线程的结合
- UI 03 UIViewController (视图控制器)的7个方法与视图的跳转
- 有上下界的最大流解法
- 属性绑定:属性被绑定到一个表达式,这个属性就会被设置为自动更新,但是,分配静态值会移除绑定
- hdu1258(Sum It Up)
- HBuilder开发App教程10-完成事项
- centos中 ,设置index.html 和 index.php的优先级
- HDU1001
- Redis Geo:Redis新增位置查询功能
- HDU1114_Piggy-Bank
- 斐波那契数列算法及时间复杂度分析
- Oracle 11g R2+RAC+ASM+redhat安装详解2
- 基于UBUNTU的NODEJS开发环境搭建
- HBuilder开发App教程11-添加事项