利用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>