HBuilder开发App教程05-滴石和websql
2015-07-09 09:36
495 查看
滴石
介绍
滴石是用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
相关文章推荐
- Objective-C和 C++ 混编的要点(转)
- Happy Number
- Android入门(39)——第一章 使用Debug方式调试程序
- Android性能优化--开篇
- cout的输出格式初探3
- 第一个Android程序 -- HelloAndroid
- php中include文件变量作用域的研究 -- 转自微信
- IOS延长启动画面的两种方法
- cout的输出格式初探2
- Android(java)学习笔记121:android.intent.action.MAIN 与 android.intent.category.LAUNCHER 理解
- ThinkAndroid框架——源码分享
- Case swapping
- [寒江孤叶丶的Cocos2d-x之旅_33]RichTextEx一款通过HTML标签控制文字样式的富文本控件
- Android开发代码编写规范
- div被object覆盖的解决办法
- div被object覆盖的解决办法
- android adb通过wifi查看日志
- Android(java)学习笔记120:Android中的Application类用法
- Android的权限permission
- 源码推荐(7.09):iOS简单即时通讯 自定义协议实现 了解传输基本原理,仿陌陌的可滑动Segment