滴石
介绍
滴石是用HBuilder开发的一款计划类app。
用到HBuilder,mui。nativejs以及h5一些特性。
预期
眼下仅仅开发到todolist级别,
以后计划做成日计划,月计划,年计划等计划类app。
网址
教程
以后HBuilder开发app以滴石为例,做一个简单的app。
功能介绍
列表页
列出要完毕的事项,详细功能:
1.左滑待办事项,能够完毕待办事项
2.点击待办事项,能够查看待办事项详情
3.长按待办事项,能够删除该事项
4.右滑待办事项列表。能够查看已完毕事项
5.左上角弹出完毕待办事项,右上角加入待办事项,退出。菜单功能
加入页
加入待办事项。详细功能:
1.点击待办事项列表右上角进入
2.填写信息加入待办事项
完毕页
右側菜单。显示已完毕待办事项。详细功能:
1.右滑待办事项列表可弹出
2.点击右上角可弹出
全部页
全部页都有退出和菜单button
数据存储的实现
HBuilder开发的app,数据存储有下面几种方式:
1.线上数据库
和传统app一样,能够将数据存储到线上数据库。
HBuilder的app,能够通过mui封装的ajax方法操作数据库。
2.web存储
利用h5的新特性,localStorage,sessionStorage,
当中sessionStorage较弱,localStorage较强。
localstorage结合store.js能够存储json对象。
3.websql
另外一种方式尽管可取,可是感觉还是比較弱,
个人比較习惯数据库的方式。对于没有线上数据库的app来说。
html5的新特性。websql是比較好的一种方式,
就是存储在本地的数据库,是一种不错的方式。
websql
简单介绍
websql和大部分sql相似,可是能够直接通过html5操作。
也就是说不须要安装数据库,仅仅要是支持html5的浏览器都能够使用。
缺点
可是和成熟的dbms相比,websql还是比較弱的。最简单的一点来说。不支持id自增。
封装
封装了websql创建数据库。更新和查询操作:
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);
};
qiao.h.update = function(db, sql){
if(db &&sql) db.transaction(function(tx){tx.executeSql(sql);});
};
qiao.h.query = function(db, sql, func){
if(db && sql){
db.transaction(function(tx){
tx.executeSql(sql, [], function(tx, results) {
func(results);
}, null);
});
}
};
因为id不能自增,全部每次插入的时候须要手动获取最大id并加1(此方法待优化,临时如此):
qiao.h.query(db, 'select max(id) mid from t_plan_day_todo', function(res){
var id = (res.rows.item(0).mid) ? res.rows.item(0).mid : 0;
qiao.h.update(db, 'insert into t_plan_day_todo (id, plan_title, plan_content) values (' + (id+1) + ', "' + title + '", "' + content + '")');
$('#todolist').prepend(genLi({id:id+1, 'plan_title':title, 'plan_content':content})).show();
});
很多其它教程: