Tutorial 05-dishi and websql, hbuilderwebsql

Tutorial 05-dishi and websql, hbuilderwebsql
Dishi Introduction

Dishi is a planning app developed with HBuilder,

HBuilder, mui, nativejs, and h5 features are used.

Expectation

Currently, it is only developed at the todolist level,

In the future, plans will be made into planning apps such as daily, monthly, and annual plans.

URL

Official Website: http://uikoo9.com/dishi

Source: http://git.oschina.net/uikoo9/uikoo9-dishi

Tutorial

In the future, we will use dishi as an example to develop an HBuilder app to create a simple app.

Function overview page

Lists the items to be completed. Specific functions:

1. Slide To-Do items left to complete the to-do items

2. Click to-do list to view the to-do list details.

3. Long-pressed to-do items can be deleted

4. Slide the to-do list to view Completed Items

5. Complete the to-do list in the upper-left corner. Add to-do lists in the upper-right corner. Exit the menu.

Add page

Add to-do items. Specific functions:

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

2. Fill in the information to add the to-do list

Completion page

The menu on the right shows the completed to-do list. Specific functions:

1. Right-sliding to-do list can be displayed

2. Click the upper right corner to bring up

All pages

All pages have exit and menu buttons

Data storage implementation

The Data Storage Methods of apps developed by HBuilder are as follows:

1. Online Database

Like traditional apps, data can be stored in online databases,

HBuilder apps can operate databases through the ajax method encapsulated by mui.

2. web Storage

Using new features of h5, localStorage, sessionStorage,

SessionStorage is weak and localStorage is strong,

Localstorage combined with store. js can store json objects.

3. websql

Although the second method is desirable, it still feels weak,

Individuals are used to database methods. For apps without online databases,

Websql is a better method for html5's new features,

It is a good way to store local databases.

Introduction to websql

Websql is similar to most SQL statements, but can be operated directly through html5,

That is to say, you do not need to install the database, as long as it is supported by html5 browsers.

Disadvantages

However, compared with mature dbms, websql is still relatively weak. In the simplest way, id auto-increment is not supported.

Encapsulation

It encapsulates websql database creation, 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 cannot be auto-incremented, you must manually obtain the maximum id and Add 1 (this method is to be optimized, for the moment) during each insertion ):

    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 Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.