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.点击右上角可弹出


所有页

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


数据存储的实现

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

你可能感兴趣的:(hbuilder,MUI,html5+,nativejs,开发app)