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

原创 2015年07月09日 09:36:53

2.png

滴石

介绍

滴石是用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

版权声明:本文为博主原创文章,未经博主允许不得转载。

Javascript对象初探

【前言】 这篇文章:http://blog.csdn.net/uikoo9/article/details/38752635
  • uikoo9
  • uikoo9
  • 2014年08月25日 08:43
  • 638

通过扫描二维码打开app的实现代码

扫描二维码打开app如果用户没有这个app则提示它跳转。 用网页直接来调用app是不打可能的,必须原生那边先做一些配置。 首先,安卓和苹果的调用方法是不同的。 所以我们需要先判断一下终端。 ...

Hbuilder开发app实战-识岁05-Crypto.js实现各种js加密算法

前言 js加密,应该说做js开发的很少接触到这一块,因为很多时候都是做加密,很少有前端做加密的, 很荣幸我接触过两次,找到了crypto.js,很好的东西,可以实现各种js加密。 吐槽 吐槽下前端...
  • uikoo9
  • uikoo9
  • 2015年08月24日 00:39
  • 4324

HBuilder webApp开发 Websql增删改查操作

这段时间公司要求我们做原生iOS和安卓的都转做H5开发APP,使用的工具HBuild。公司这么要求我们也就只能转行做了。大家都是小白,好在公司有两位H5大神,他们先给我们一些代码看看,所我,我们上手也...

HBuilder webApp开发 Websql增删改查操作

这段时间公司要求我们做原生iOS和安卓的都转做H5开发APP,使用的工具HBuilder。公司这么要求我们也就只能转行做了。大家都是小白,好在公司有两位H5大神,他们先给我们一些代码看看,所以,我们上...

HBuilder开发App教程08-几种页面打开方式

说明 上节说了list页面的实现,其中关于几种页面的打开方式没有详细述说, 本节详细述说下几种页面打开方式的区别。 几种打开页面的方式 1.初始化时创建子页面 2.直接打开新页面 ...
  • uikoo9
  • uikoo9
  • 2015年08月04日 20:55
  • 13017

HBuilder开发App教程07-列表页

说明 接着上节的内容,本节讲首页的list页面, 如果看过上一节你就会明白“首页”是由只有头部的index页面和列表list页面组成的, 本节涉及到: 1.几种页面的打开方式 2.websq...
  • uikoo9
  • uikoo9
  • 2015年08月04日 20:54
  • 6055

HBuilder开发App教程06-首页

实战 前面几节基本是一些概念的普及, 正如前面提到的,本教程会以滴石作为范例进行讲解, 有兴趣的可以先行下载体验一下,或者下载源码研究下。 新建项目 打开HBuilder,在项目管理...
  • uikoo9
  • uikoo9
  • 2015年07月29日 23:16
  • 15762

HBuilder开发App教程

奇妙的前端,奇妙的js 众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序, 随着html5的出现,伴随一些amazing的特性,h5开发app的技...

HBuilder开发App教程10-完成事项

回顾 回顾一下之前的要点: 1.Hbuilder创建项目,真机调试 2.首页 3.列表页 4.侧滑菜单 5.websql 6.几种页面打开的方式 再讲下本节的要点: 1.fire方式...
  • uikoo9
  • uikoo9
  • 2015年08月04日 20:57
  • 7562
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HBuilder开发App教程05-滴石和websql
举报原因:
原因补充:

(最多只允许输入30个字)