利用HBuilderX 开发了一个小demo，系统登录，页面跳转到主页，点击按钮实现扫一扫功能。记录下开发过程。
1：利用HBuilderX 新建一个5+App;
2：编写功能所需要的css js 等；
3：实现安装包升级功能；
4：打包apk或ipa;
代码开发：
源码附后
在线升级App
在生成升级包安装过程中碰见的一个问题：
安装wgt文件失败[-1205]:WGT安装包中manifest.json 文件的version 版本不匹配；
进入到发布升级包资源的路径下：查看mainifest.json中的版本号是否和需要升级的版本一致，不一致重新生成升级包。
扫描二维码关注公众号，回复：
11093888 查看本文章
打包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>
