Web SQL DatabaseWeb SQL Database创建表删除表编号名称价格删除商品信息名称：价格：添加更新{ () { () { ); }); }, () { .openDb(); .bindEvent(); .select(); ); }, () { .insert); $(.update); $(.createTable); $(.dropTable); }, (info) { $(; }, (sql,title,param,callback) { title; (tx) { tx.executeSql( sql, param||[], function(tx, result) { dbApp.log(title); callback(result); } }, function(tx, error) { dbApp.log(title error.message); }); }); }, () { dbApp.exeSql(); }, () { dbApp.exeSql(); }, () { dbApp.exeSql((result) { ).remove(); ) { ); $(]).appendTo(tr); $(]).appendTo(tr); $(]).appendTo(tr); ) ) $().append(del).append(edit).appendTo(tr); tr.appendTo(); } }); }, () { (){ dbApp.select(); }); }, (id, link) { dbApp.exeSql((result){ ).remove(); }); }, (id) { dbApp.exeSql((result) { $(]); $(]); $(]); dbApp.log(); }); }, () { ).val()) { dbApp.exeSql((result) { dbApp.select(); $(); }); } else { dbApp.log(); } } }; dbApp.init();

运行结果：

4.10、美化页面

在原页面的基础上增加css样式，添加样式后的页面脚本如下：

Web SQL Database * { margin padding font-family #container{ padding font-size #container a{ color text-decoration margin-right #container a:hover{ color button,a{ border height line-height border-radius padding background color button:hover{ background #container h2{ height html #tabGoods{ width margin border #tabGoods,#tabGoods td,#tabGoods th { border border-collapse #tabGoods td,#tabGoods th{ padding #fieldsetForm{ width padding border-radius border #fieldsetForm p{ padding #msg{ font-size font-weight height overflow margin-topWeb SQL Database创建表删除表编号名称价格删除商品信息名称：价格：添加更新 { () { () { ); }); }, () { .openDb(); .bindEvent(); .select(); ); }, () { .insert); $(.update); $(.createTable); $(.dropTable); }, (info) { $(; }, (sql, title, param, callback) { title ; (tx) { tx.executeSql( sql, param || [], function(tx, result) { dbApp.log(title ); callback(result); } }, function(tx, error) { dbApp.log(title error.message); }); }); }, () { dbApp.exeSql(); }, () { dbApp.exeSql(); }, () { dbApp.exeSql((result) { ).remove(); ) { ); $(]).appendTo(tr); $(]).appendTo(tr); $(]).appendTo(tr); ) ) $().append(del).append(edit).appendTo(tr); tr.appendTo(); } }); }, () { () { dbApp.select(); }); }, (id, link) { dbApp.exeSql((result) { ).remove(); }); }, (id) { dbApp.exeSql((result) { $(]); $(]); $(]); dbApp.log(); }); }, () { ).val()) { dbApp.exeSql((result) { dbApp.select(); $(); }); } else { dbApp.log(); } } }; dbApp.init();

运行结果：

五、移动端打包与运行 5.1、在手机端直接访问Web站点

将手机与电脑连接到同一个网段，比如可以使用wifi

查看本机ip地址，有时需要将本地连接禁用，查看ip地址的指令是ipconfig

在手机端使用浏览器查看结果如下：

5.2、打包成app安装运行

这里使用HBuilder打包成apk的安装包，安装打包结果如下：

5.3、套用移动端UI框架

这里使用HBuilder内置的MUI为例，新增d06.html，页面脚本如下：