Hbuilder Development App Tutorial 05-Drop Stone and Websql

Source: Internet
Author: User
Tags sessionstorage

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.