本文讲解了如何在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插件

  • 打开数据库
			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)');
			});
  • 插入记录
		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);
			});
		});
  • 查询记录
		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代码如下

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