HBuilder开发App教程05-滴石和websql

滴石

介绍

滴石是用HBuilder开发的一款计划类app。

用到HBuilder，mui。nativejs以及h5一些特性。

预期

眼下仅仅开发到todolist级别，

以后计划做成日计划，月计划，年计划等计划类app。

网址

官网：http://uikoo9.com/dishi

开源：http://git.oschina.net/uikoo9/uikoo9-dishi

教程

以后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();
    });

很多其它教程：

HBuilder开发App教程：http://uikoo9.com/book/detail/3

很多其它学习笔记：http://uikoo9.com/book