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

 

滴石

介绍

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

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

预期

目前只开发到todolist级别，

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

网址

官网：滴石

开源：uikoo9-dishi: 滴石，取水滴石穿之意，计划类app，计划成就人生~

教程

以后HBuilder开发app以滴石为例，做一个简单的app。

功能介绍

列表页

列出要完成的事项，具体功能：

1.左滑待办事项，可以完成待办事项

2.点击待办事项，可以查看待办事项详情

3.长按待办事项，可以删除该事项

4.右滑待办事项列表，可以查看已完成事项

5.左上角弹出完成待办事项，右上角添加待办事项，退出，菜单功能

添加页

添加待办事项，具体功能：

1.点击待办事项列表右上角进入

2.填写信息添加待办事项

完成页

右侧菜单，显示已完成待办事项，具体功能：

1.右滑待办事项列表可弹出

2.点击右上角可弹出

所有页

所有页都有退出和菜单按钮

数据存储的实现

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