4591人阅读
07_HPP开发（20）
回顾一下之前的要点：
1.Hbuilder创建项目，真机调试
4.侧滑菜单
6.几种页面打开的方式
再讲下本节的要点：
1.fire方式页面间传值
2.再讲websql
左滑待办事项会出现完成按钮，点击按钮会将待办事项完成，并加入侧滑菜单，
1.左滑出现完成按钮
2.点击按钮后将事项从待办表中删除
3.同时将事项加入完成表中
4.侧滑菜单显示完成事项
涉及两个页面，一个是list，一个是menu，
为了让操作更流畅，所以在list页面只进行点击事件，然后将事件传递到menu页面，
menu页面进行，添加完成事项，移除待办事项，显示完成事项操作。
左滑待办事项出现完成按钮是mui自带的组件，详见文档，list代码如下
qiao.on('.doneBtn', 'tap', function(){
var $li = $(this).parent().parent();
var id = $li.data('id');
$li.remove();
showList($('#todolist'));
qiao.h.fire('menu', 'doneItem', {todoId:id});
list.js中只需要添加如上代码，
第一部分是获取该待办事项Li的id，然后移除Li，
第二部分是将获取的id通过fire的方式传到menu页面
1.index页面初始化两个表
var db = qiao.h.db();
qiao.h.update(db, 'create table if not exists t_plan_day_todo (id unique, plan_title, plan_content)');
qiao.h.update(db, 'create table if not exists t_plan_day_done (id unique, plan_title, plan_content)');
表t_plan_day_todo用来保存list页面的待办事项，有主键，标题和内容三个属性，
表t_plan_day_done用来保存menu页面的完成事项，有主键，标题和内容三个属性。
2.qiao.h.db()
用来获取一个数据库，具体代码如下：
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);
可见默认创建了一个“db_test”的数据库，大小为2*k
3.qiao.h.update()
更新操作，所有的增加，删除，修改以及一些不需要返回结果的sql操作，代码如下：
qiao.h.update = function(db, sql){
if(db &&sql) db.transaction(function(tx){tx.executeSql(sql);});
4.list页面获取数据
list页面需要从t_plan_day_todo表中获取数据，并展示，代码如下：
// 初始化待办事项
function initList(){
var $ul = $('#todolist').empty();
qiao.h.query(qiao.h.db(), 'select * from t_plan_day_todo order by id desc', function(res){
for (i = 0; i & res.rows. i++) {
$ul.append(genLi(res.rows.item(i)));
showList($ul);
5.qiao.h.query()
执行查询操作，需要传入回调函数操作返回的结果，代码如下：
qiao.h.query = function(db, sql, func){
if(db && sql){
db.transaction(function(tx){
tx.executeSql(sql, [], function(tx, results) {
func(results);
6.menu页面的删除添加和查询
为了app更加流畅，在list页面只移除了li元素，其他所有数据库操作都放到menu页面进行，
包括，删除todo表中的事项，添加到done表，查询done表并显示，代码如下：
mui.init({
keyEventBind : {
backbutton : false
// 所有的方法都放到这里
mui.plusReady(function(){
initDoneList();
// 添加已完成事项
window.addEventListener('doneItem', doneItemHandler);
// 初始化待办事项
function initDoneList(){
var $ul = $('#donelist').empty();
qiao.h.query(qiao.h.db(), 'select * from t_plan_day_done order by id desc', function(res){
for (i = 0; i & res.rows. i++) {
$ul.append(genLi(res.rows.item(i).plan_title));
showList($ul);
function genLi(title){
return '&li class=&mui-table-view-cell&&' + title + '&/li&';
function showList(ul){
if(ul.find('li').size() & 0 &&
ul.is(':hidden')) ul.show();
// 添加已完成事项
function doneItemHandler(event){
var todoId = event.detail.todoId;
var db = qiao.h.db();
qiao.h.query(db, 'select * from t_plan_day_todo where id=' + todoId, function(res){
if(res.rows.length & 0){
var data = res.rows.item(0);
qiao.h.query(db, 'select max(id) mid from t_plan_day_done', function(res1){
$('#donelist').prepend('&li class=&mui-table-view-cell&test&/li&').prepend(genLi(data.plan_title)).show();
var id = (res1.rows.item(0).mid) ? res1.rows.item(0).mid : 0;
qiao.h.update(db, 'insert into t_plan_day_done (id, plan_title, plan_content) values (' + (id+1) + ', &' + data.plan_title + '&, &' + data.plan_content + '&)');
qiao.h.update(db, 'delete from t_plan_day_todo where id=' + todoId);
首先，mui.init初始化中将后退按钮屏蔽，
其次，通过qiao.h.query查询到done表中的数据并显示，
最后，监听事件，获取todo中移除的id，
通过todoid查询到移除的todo列的title和content，
将这个title和content插入到done表中，
插入成功后删除todo表中记录。
上面的代码有点枯燥，但也不是很难，希望可以看懂，
看懂后你会发现将list页面的todoid传到menu页面是个问题，
这里采用了fire方式，简单的说就是，
list页面对menu页面发起一个事件，即fire，
然后menu页面监听list页面的这个事件。
qiao.h.fire()
qiao.h.fire = function(id, name, values){
mui.fire(qiao.h.getPage(id), name, values);
这里可以看到，只是将mui.fire封装了下，只需要传入页面id，将自动获取该id对应的页面
qiao.h.getPage()
qiao.h.getPage = function(id){
return id ? plus.webview.getWebviewById(id) :
通过id获取webview页面对象的封装。
list页面fire
qiao.h.fire('menu', 'doneItem', {todoId:id});
话说mui两种页面间传值的方法，一是evalJs，但是不做推荐，为啥不做推荐，请百度之，
然后就是fire的方式了，方便传值，还是比较好的。
这里是list页面对menu页面fire了。
menu页面监听
window.addEventListener('doneItem', doneItemHandler);
然后就可以尽情的干各种事情了。。
1.websql详解
2.fire详解
更多教程：
HBuilder开发App教程：
更多学习笔记：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：980871次
积分：7911
积分：7911
排名：第2031名
原创：200篇
转载：14篇
评论：295条Hbuilder APP直接拨打电话的教程代码
所属栏目：　时间：　来源：　作者：　点击：
帝国CMS 2000人qq交流群：
html5有个 tel: 的代码，可以自己输入号码在拨号键，但我们希望在Hbuilder 开发的APP中实现点击后直接拨打电话。//拨打电话的
function&dialTest()&{
plus.nativeUI.confirm(&您确定要拨打电话吗？&,
function(event){
if(event.index&==1){
plus.device.dial(&&10086&,&false&);
,'客服消息',['取消','确定']
&a&onclick=&dialTest()&&拨打电话&/a&
请站长喝杯咖啡？
站长一直坚持白天工作、晚上熬夜更新素材，付出了巨大的精力和时间，其中的辛酸难以言述。坚持免积分、免登录、无任何限制下载！如果本站素材对你有用，不妨考虑请站长喝杯咖啡鼓励一下！
你应该也喜欢这些吧
给个评价吧
学习最多的
最近更新的
2014全新改版上线
2013全新改版上线1889人阅读
HTML5进阶（2）
HBuilder实现软件自动升级(优化篇)
受前篇博客《的影响，测试过程中发现APP自动更新还是存在问题，第一次升级没有任何问题。第二次升级时，若wrt升级包的名字相同，则会出现以下错误提示:
& & & 估计是HBuilder的BUG导致出现以上错误。受社区中盆友们思路的启发，在每次更新时提交不同文件名的wrt更新包，方可解决以上问题。
& & & 同时在上篇博客中提到“检测更新更好的模式应该是客户端提交本地应用资源版本号到升级服务器，由升级服务器判断是否可更新并且返回App升级资源包下载地址，避免在客户端写资源下载地址；”。由此，自己由本地检测版本更新变更为将本地app版本提交至升级服务端，由服务端判断app是否可更新，若存在更新版本则返回相应的新版本号及版本下载地址。
& & & 在提交新版本时，应注意版本号的一致性，即wrt版本号、版本号文件version.txt中的版本号相一致。
客户端源码(拿走不谢)
var wgtVer
function plusReady(){
// 获取本地应用资源版本号
plus.runtime.getProperty(plus.runtime.appid,function(inf){
wgtVer = inf.
localStorage.setItem('newVer', wgtVer);
console.log(localStorage.getItem('newVer'));
console.log(&当前应用版本：& + wgtVer);
/*alert( &国际移动设备身份码IMEI: & + plus.device.imei );
alert( &国际移动用户识别码IMSI: & + plus.device.imsi );
alert( &设备唯一标识号uuid: &+plus.device.uuid );*/
console.log(&=============版本测试=============&);
var version = {
'version': wgtVer
appCallServer($http, &9104&, version,
function(data) {
console.log(&9104_版本查询成功& + JSON.stringify(data));
// H5 plus事件处理,弹出提示信息对话框
plus.nativeUI.confirm(&\&立马送药\&检测到新版本,是否更新?&, function(e) {
if (e.index == 0) {
console.log(&确定更新！&);
downWgt(data.newVersion, data.url); // 下载升级包
立马送药&, [&确定&, &取消&]);
}, function(data) {
/*$ionicLoading.show({
template: '测试'
$timeout(function() {
$ionicLoading.hide();
}, 1200);*/
if(window.plus){
plusReady();
document.addEventListener('plusready',plusReady,false);
// 下载新版本
function downWgt(newVer, wgtUrl){
plus.nativeUI.showWaiting(&下载wgt文件...&);
plus.downloader.createDownload( wgtUrl, {filename:&_doc/update/&}, function(d,status){
if ( status == 200 ) {
console.log(&下载wgt成功：&+d.filename);
installWgt(d.filename,newVer);// 安装wgt包
console.log(&下载wgt失败！&);
plus.nativeUI.alert(&下载wgt失败！&);
plus.nativeUI.closeWaiting();
}).start();
// 更新应用资源
function installWgt(path,newVer){
plus.nativeUI.showWaiting(&安装wgt文件...&);
// force:false进行版本号校验，如果将要安装应用的版本号不高于现有应用的版本号则终止安装，并返回安装失败
plus.runtime.install(path,{force:false},function(){
plus.nativeUI.closeWaiting();
console.log(&安装wgt文件成功！&);
localStorage.setItem('newVer', newVer);
// H5 plus事件处理,弹出提示信息对话框
plus.nativeUI.confirm(&应用资源更新完成,是否重新打开应用?&, function(e) {
if (e.index == 0) {
console.log(&确定重新打开应用！&);
plus.runtime.restart();
立马送药&, [&确定&, &取消&]);
},function(e){
plus.nativeUI.closeWaiting();
console.log(&安装wgt文件失败[& + e.code + &]：& + e.message);
plus.nativeUI.alert(&安装wgt文件失败[& + e.code + &]：& + e.message);
服务端源码(拿走不谢)
// check version
public static boolean do_9104(RequestMessage request,ResponseMessage response) {
(&\n\n------------Check_APP_Version_9104 debug info-------------\n请求数据包信息:& + request.json.toString());
String version = request.getString(&version&).trim();
String currentVersion = FileUtil.readFile(MyConst.VERSION_FILE_PATH).replaceAll(&null&,&&).trim();
(&当前APP版本:[& + currentVersion + &]&);
if(!version.isEmpty() && !currentVersion.isEmpty() && (!version.equals(currentVersion))){
response.json.element(&newVersion&, currentVersion);
// 返回最新版本
response.json.element(&url&, MyConst.WGT_URL + currentVersion + &.wgt&); // 返回wgt文件下载地址
}else if(!version.isEmpty() && !currentVersion.isEmpty() && (version.equals(currentVersion))){
response.result = MyConst.ERR_VERSION_SAME;
response.errtext = &当前已是最新版本&;
response.result = MyConst.ERR_VERSION;
response.errtext = &版本信息查询失败&;
return (false);
& & & 在上面的app版本管理中，更新包及版本控制文件version.txt均需要手动添加、更改，这一体验令人极为不爽，遂决定进一步优化之~
& & & 为了进一步方便管理人员对版本控制的操作。在管理端进一步增加通过程序增加更新包的功能模块，该功能模块能够实现更新包的上传，同时将新的版本号写入version.txt版本文件中。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：427235次
积分：8415
积分：8415
排名：第1833名
原创：386篇
转载：44篇
评论：104条
文章：19篇
阅读：14145
文章：23篇
阅读：13728
文章：20篇
阅读：16639
文章：25篇
阅读：21370
文章：28篇
阅读：44876
文章：40篇
阅读：37095
文章：44篇
阅读：29451
文章：29篇
阅读：72423
(19)(19)(22)(18)(28)(17)(31)(19)(13)(7)(16)(4)(28)(29)(31)(11)(14)(21)(26)(6)(21)(22)(1)