体验H5+plus开发移动端

利用HBuilderX 开发了一个小demo，系统登录，页面跳转到主页，点击按钮实现扫一扫功能。记录下开发过程。

1：利用HBuilderX 新建一个5+App;

2：编写功能所需要的css js 等；

3：实现安装包升级功能；

4：打包apk或ipa;

代码开发：

源码附后

在线升级App

在生成升级包安装过程中碰见的一个问题：

安装wgt文件失败[-1205]:WGT安装包中manifest.json 文件的version 版本不匹配；

进入到发布升级包资源的路径下：查看mainifest.json中的版本号是否和需要升级的版本一致，不一致重新生成升级包。

打包APP

Android打包相对简单；

这里记录下ios端的打包：

首先需要注册ios开发者账户：https://developer.apple.com/

此时还没有enroll （加入ios开发者中心）https://developer.apple.com/enroll/

enroll是需要付费的，不付费相当于是免费的开发账号，苹果开发者账户类型参考如下：

此表出处：http://www.applicationloader.net/blog/zh/1073.html

如果只是体验学习下：

可以下载一个试用工具appUploader来得到打包ios所需要的证书（*.p12）和描述文件(*.mobileprovision)

源代码如下：代码可参考DCCloud 示例项目

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>HGCLoud</title><script src="js/mui.min.js"></script><link href="css/mui.min.css" rel="stylesheet"/><style type="text/css">html{height: 100%;margin: 0;padding: 0;}body{            width: 100%;height: 100%;background-color: rgba(13, 42, 67, 1);/* background-image:url('images/bgc.png'); */background-size:cover;-webkit-background-size: cover;background-repeat: no-repeat;font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;font-size: 0;overflow: hidden;}.title-wrapper{position: fixed;top:20%;left:50%;width: 400px;height: 100%;margin-left: -200px;} .title{font-size: 25px;color:white;}.login-wrapper{position: absolute;bottom: 20%;width: 100%;}.login-wrapper .btn-large{width: 200px;height: 50px;background-color: red;font-size: 15px;}        </style>
</head>
<body><center class="title-wrapper"><h1 class="title">Hello 系统登录</h1><br><span class="version">V8.0</span></center><div class="login-wrapper"><center><button id="btnLogin" type="button" data-loading-text="登录中..." data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-danger  btn-large">登录</button></center></div>
</body>
</html>
<script type="text/javascript" charset="utf-8">mui.init();var wgtVer=null;  function plusReady(){  plus.runtime.getProperty(plus.runtime.appid,function(inf){  wgtVer=inf.version;  checkUpdate();}); mui(document.body).on('tap', '.mui-btn', function(e) {mui(this).button('loading');setTimeout(function() {mui(this).button('reset');mui.openWindow('home.html','home',{});}.bind(this), 700);});}  if(window.plus){  plusReady();}else{  document.addEventListener('plusready',plusReady,false);  }var wgtUrl="http://192.168.10.140:8002/update/H5C1960F0.wgt";function downWgt(){plus.nativeUI.showWaiting("下载更新，请稍后...");var dtask = plus.downloader.createDownload( wgtUrl, {filename:"_doc/update/"}, function(d,status){if ( status == 200 ) { console.log("下载wgt成功："+d.filename);installWgt(d.filename); } else {// console.log("下载wgt失败！");plus.nativeUI.alert("下载更新包失败！");}plus.nativeUI.closeWaiting();});try {dtask.start(); // 开启下载的任务var prg = 0;dtask.addEventListener('statechanged', function(task,status) {        switch (task.state) {case 1://'正在下载';              break;case 2:// '已连接到服务器';            break;case 3:prg = parseInt((parseFloat(task.downloadedSize) /parseFloat(task.totalSize)) * 100);// document.getElementById("progress").innerText=prg;break;case 4:// that.showProgress = false;break;}});} catch (err) {// that.showProgress = false;plus.nativeUI.toast('网络异常,请稍候再试' + err);}//end of task}// 更新应用资源function installWgt(path){plus.nativeUI.showWaiting("安装wgt文件...");plus.runtime.install(path,{},function(){plus.nativeUI.closeWaiting();console.log("安装wgt文件成功！");plus.nativeUI.alert("应用资源更新完成！",function(){plus.runtime.restart();});},function(e){plus.nativeUI.closeWaiting();console.log("安装wgt文件失败["+e.code+"]："+e.message);plus.nativeUI.alert("安装wgt文件失败["+e.code+"]："+e.message);});}// 检测更新  var checkUrl="http://192.168.10.140:8002/api/dc/checkversion";  function checkUpdate(){  // plus.nativeUI.showWaiting("检测更新...");var xhr=new XMLHttpRequest();  xhr.onreadystatechange=function(){  switch(xhr.readyState){  case 4:  // plus.nativeUI.closeWaiting();  if(xhr.status==200){  console.log("检测更新成功："+xhr.responseText);  var newVer = JSON.parse(xhr.responseText);  console.log(wgtVer);if(wgtVer &&newVer.Version && (wgtVer!=newVer.Version)){  var btnArray = ['否', '是'];mui.confirm('是否立刻升级？', '发现新版本', btnArray, function(e) {if (e.index == 1) {downWgt(); } else{}});}else{  // plus.nativeUI.alert("无新版本可更新！");  } }else{  console.log("检测更新失败！");  plus.nativeUI.alert("检测更新失败！");  }  break;  default:  break;  }  }  xhr.open('GET',checkUrl);  xhr.send();  }</script>

扫一扫页面功能：

<!doctype html>
<html>    <head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.css" rel="stylesheet" /></head><style> .title{color:white;text-align: center;          }.main-wrapper{position: absolute;bottom: 30%;width: 100%;}.main-wrapper .btn-large{width: 200px;height: 50px;background-color: red;font-size: 15px;}</style><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">后台管理主页</h1></header><div class="main-wrapper"><center><button id="btnScan" type="button" class="mui-btn mui-btn-danger btn-large">扫一扫</button></center></div><script src="js/mui.js"></script><script src="js/common.js"></script><script type="text/javascript">mui.init();mui.plusReady(function(){             mui('.main-wrapper').on('tap', '#btnScan', function(e) {                  createWithoutTitle('barcode_scan.html', {titleNView:{type: 'float',backgroundColor: 'rgba(255,0,0,1)',titleText: '扫一扫',titleColor: '#FFFFFF',autoBackButton: true,                     }});                 });});function scaned(t, r, f){mui.toast("恭喜：扫码成功！");              plus.runtime.openURL(r);            }</script></body>
</html>