Hbuilder Development App Tutorial 05-Drop Stone and Websql

Drop Stone Introduction

Drop Stone is a program-like app developed with Hbuilder,

Use the Hbuilder,mui,nativejs and H5 some features.

Expected

Currently only developed to the todolist level,

Plan for future projects such as daily plans, monthly plans, and annual plans.

Url

Official website: Http://uikoo9.com/dishi

Open Source: Http://git.oschina.net/uikoo9/uikoo9-dishi

Tutorial

In the future, Hbuilder development app takes Drop stone as an example, make a simple app.

Feature Introduction List page

List the things you want to accomplish, specific features:

1. Left-to-do items, you can complete to-dos

2. Click to do item to view the details of the to-dos

3. Long press to-dos to delete the item

4. Right-swipe to-do list to view completed items

5. Top left corner pops up to-do items, add to-do items in top right corner, exit, Menu function

Add page

Add to-DOS, specific features:

1. Click the top right corner of the to-do list to enter

2. Fill in the information to add to-dos

Finish page

menu on the right, showing completed to-do items, specific features:

1. Right-swipe to-do list pops up

2. Click on the top right corner to eject

All pages

All pages have exit and Menu buttons

Implementation of data storage

Hbuilder developed apps, data storage is available in the following ways:

1. Online database

As with traditional apps, you can store your data on a online database,

Hbuilder app that can manipulate databases through the MUI encapsulated AJAX approach.

2.web Storage

Using the new features of H5, Localstorage,sessionstorage,

Which sessionstorage weak, Localstorage strong,

Localstorage combines store.js to store JSON objects.

3.websql

The second way, although desirable, but the feeling is still relatively weak,

Individuals are more accustomed to the database of the way, for the app without online database,

The new features of HTML5, Websql is a better way to

is a good way to store the database locally.

Websql Introduction

Websql is similar to most SQL, but can be manipulated directly through HTML5,

This means that you do not need to install the database, as long as it is supported HTML5 browser can be used.

Disadvantages

However, compared with the mature DBMS, Websql is still relatively weak, the simplest point is that it does not support ID self-increment.

Packaging

Encapsulates the Websql create database, update, and query operations:

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);}        )    ;};

Because the ID does not increment, you need to manually obtain the maximum ID and add 1 for each insertion (this method is optimized, temporarily):

    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 ();    });

More Tutorials:

Hbuilder Development App Tutorial: HTTP://UIKOO9.COM/BOOK/DETAIL/3

More study notes: Http://uikoo9.com/book

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Hbuilder Development App Tutorial 05-Drop Stone and Websql