HBuilder開發App教程05-滴石和websql

標籤：mui   nativejs   hbuilder   開發app   html5+   

滴石介紹

滴石是用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開發App教程05-滴石和websql