本文讲解了如何在WeX5中使用SQLite数据库，同时展示了如何在App中加入自己的cordova插件。

SQLite是嵌入式的和轻量级的SQL数据库。广泛用于IOS、Android等设备，实现本地数据存储。

在WeX5中使用SQLlite数据库，步骤如下

1、下载SQLite的cordova插件

（1）、访问https://github.com/brodysoft/Cordova-SQLitePlugin，

下载brodysoft/Cordova-SQLitePlugin

（2）、将插件复制到WeX5中

解压下载的Cordova-SQLitePlugin-master.zip文件，解压出Cordova-SQLitePlugin-master目录。

打开Cordova-SQLitePlugin-master目录下的plugin.xml文件，找到id=”com.brodysoft.sqlitePlugin”，将解压出的目录名Cordova-SQLitePlugin-master替换为id的值com.brodysoft.sqlitePlugin

将com.brodysoft.sqlitePlugin目录复制到studio模型资源视图中的/Native/plugins目录下

复制插件

 

2、在js中使用cordova插件

  • 打开数据库
1
2
3
me.db = window.sqlitePlugin.openDatabase({
    name : "my.db"
});
  • 创建数据表
1
2
3
me.db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS test_table (id integer primary key, data text, data_num integer)');
});
  • 插入记录
1
2
3
4
5
6
this.db.transaction(function(tx) {
    tx.executeSql("INSERT INTO test_table (data, data_num) VALUES (?,?)", [ "test", 100 ], function(tx, res) {
    }, function(e) {
        alert("ERROR: " + e.message);
    });
});
  • 查询记录
1
2
3
4
5
6
this.db.transaction(function(tx) {
    tx.executeSql("INSERT INTO test_table (data, data_num) VALUES (?,?)", [ "test", 100 ], function(tx, res) {
    }, function(e) {
        alert("ERROR: " + e.message);
    });
});

 

3、生成App包

创建本地App时

（1）选择源代码模式

选择源代码模式

（2）手动选择cordova插件 Brodysoft SQLitePlugin

选择SQLIte插件

使用打包服务器打包

在手机上下载、安装、运行App即可

说明

  • 在deviceready之后再使用数据库
  • 注意SQLite的相关限制 http://www.sqlite.org/limits.html

完整js代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
define(function(require) {
    var $ = require("jquery");
    var justep = require("$UI/system/lib/justep");
 
    var Model = function() {
        this.callParent();
        this.db;
    };
 
    Model.prototype.modelLoad = function(event) {
        var me = this;
        document.addEventListener("deviceready", onDeviceReady, false);
        // 设备就绪
        function onDeviceReady() {
            me.db = window.sqlitePlugin.openDatabase({
                name : "my.db"
            });
            me.db.transaction(function(tx) {
                tx.executeSql('CREATE TABLE IF NOT EXISTS test_table (id integer primary key, data text, data_num integer)');
            });
        }
    };
 
    Model.prototype.btnInsertClick = function(event) {
        this.db.transaction(function(tx) {
            tx.executeSql("INSERT INTO test_table (data, data_num) VALUES (?,?)", [ "test", 100 ], function(tx, res) {
            }, function(e) {
                alert("ERROR: " + e.message);
            });
        });
    };
 
    Model.prototype.btnQueryClick = function(event) {
        this.db.transaction(function(tx) {
            tx.executeSql("select id,data,data_num from test_table;", [], function(tx, res) {
                for ( var i = 0; i < res.rows.length; i++) {
                    var record = res.rows.item(i).data + "   " + res.rows.item(i).data_num;
                    alert("记录内容： " + record);
                }
            });
        });
    };
 
    Model.prototype.backBtnClick = function() {
        justep.Portal.closeWindow();
    };
 
    return Model;
});

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443