HBuilder开发App教程05-滴石和websql
滴石
介绍
滴石是用HBuilder开发的一款计划类app。
用到HBuilder,mui。nativejs以及h5一些特性。
预期
眼下仅仅开发到todolist级别,
以后计划做成日计划,月计划,年计划等计划类app。
网址
开源: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
HBuilder开发App教程05-滴石和websql的更多相关文章
- HBuilder开发App教程06-首页
实战 前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行解说, 有兴趣的能够先行下载体验一下.或者下载源代码研究下. 新建项目 打开HBuilder,在项目管理器中右键--新建 ...
- HBuilder开发App教程04-最难搞定的是mui
前言 前几篇说到一些HBuilder开发app的基础教程, 现在来说一下HBuilder开发app的难点,或者说是上手的难点, 就是mui, 如果你没有研究mui就贸然的上手HBuilder,那你的开 ...
- Hbuilder开发app实战-识岁03-文件上传
前言 做app不得不谈的问题就是文件上传.用hbuilder开发app让上传变的非常easy. Uploader Uploader模块管理网络上传任务,用于从本地上传各种文件到server,并支持跨域 ...
- Hbuilder开发app实战-识岁06-face++的js实现【完结】
前言 因为识岁app比較简单.所以这节就完结吧, 当然另一些能够优化完好的地方,可是个人兴趣不是非常大, 有想继续完好的,源代码在这里:https://github.com/uikoo9/shisui ...
- HBuilder开发APP自动登录时跳过"登录页面"
刚接触开发公司APP项目,用HBuilder开发工具. manifest.json中的入口页面就是"登录页面",现在获取到自动登录状态是true,但是真机联调时"登录页面 ...
- hbuilder 开发app 自动升级
使用huilder 开发app ,实现app升级功能 1. var wgtVer = null; //用于获取系统当前版本 var currentversion = null; //用于获取系统最新 ...
- 学用HBuilder开发App的看过来
自己的呕心沥血之作吧,花了一年时间,系统介绍HTML5 App开发的相关技术. 越来越多的公司采用HTML5来快速开发移动跨平台App,它支持当前市场流行的移动设备. 本书主要介绍了HTML5在移动A ...
- HBuilder开发App Step1——环境搭建,HelloMUI 以及真机调试
No1. 必须搭建java环境 只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...
- Hbuilder开发app时生成ios要的mobileprovision和p12文件步骤.
1.在MAC电脑.钥匙串串访问->证书助理->从证书颁发机构请求证书,创建一个证书为certSigningRequest文件 2.在Apple Developer中的Certificate ...
随机推荐
- ie8不支持伪类选择器的解决方案
引用jQuery的插件jquery.pseudo.js插件内容: (function($){ var patterns = { text: /^['"]?(.+?)["']?$/, ...
- 【牛客小白月赛6】F 发电 - 树状数组&快速幂&逆元
题目地址:https://www.nowcoder.com/acm/contest/136/F 树状数组.快速幂.逆元的模板运用: #include<iostream> #include& ...
- ZooKeeper运行原理和基本编程接口
什么是ZooKeeper ZooKeeper作为一个分布式的服务框架(与Google Chubby类似),主要用于解决分布式集群中应用系统的一致性问题,它能提供基于类似于文件系统的目录节点树方式的数 ...
- JavaScript中函数的定义
JavaScript中函数的定义 制作人:全心全意 在JavaScript中,函数是由关键字function.函数名加一组参数以及置于大括号中需要执行的一段代码定义的.定义函数的基本语法格式如下: f ...
- [数据结构]C#基于数组实现泛型顺序表
前方预警,只完成了顺序表的插入/删除/查找. 错误代码示例: /// <summary> /// 查找顺序表第i个位置的元素 /// 在显示情况中,我们更常用下标 /// </sum ...
- 【03】使用 Firebug 调试 JavaScript
[03] 使用 Firebug 调试 JavaScript 描述 Firebug是一个非常强大的工具,可以帮助您发现代码发现错误的错误并解决错误. 在此我们使用Firebug来处理Javascript ...
- Leetcode 319.灯泡开关
灯泡开关 初始时有 n 个灯泡关闭.第 1 轮,你打开所有的灯泡.第 2 轮,每两个灯泡你关闭一次.第 3 轮,每三个灯泡切换一次开关(如果关闭则开启,如果开启则关闭).第 i 轮,每 i 个灯泡切换 ...
- NYOJ-676小明的求助,快速幂求模,快速幂核心代码;
小明的求助 时间限制:2000 ms | 内存限制:65535 KB 难度:2 描述 小明对数学很有兴趣,今天老师出了道作业题,让他求整数N的后M位,他瞬间感觉老师在作弄他,因为这是so easy ...
- Robot Framework中的未解之谜
今天在写测试用例的时候偶然发现了一个问题: 一.看脚本逻辑上没有问题,但是在引用变量的时候不能成功引用,脚本截图如下: 这个是关键字A的截图,没有参数. 此时在case中引用${phonesign}和 ...
- bitset初始化问题
在C++primer上面说,bitset可以用unsigned long来进行初始化,但是上面的例子只是采用了常数如0xffff,而在实际中,当在vs2010中,我采用unsigned long类型的 ...