下面简单讲解一下如何搭建开发环境和编译出简单的版本。
1、开发环境搭建
a.下载APICloud Studio软件。
b.登陆http://www.apicloud.com/,注册账号,创建一个应用,名为HELLO,设置好签名,图标等。
c.打开APICloud Studio软件,登陆。点击服务器,检出HELLO应用。
2、编写代码
代码的结构如下
打开index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="./css/api.css" />
<link rel="stylesheet" type="text/css" href="./css/common.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<h1>APICloud</h1>
</div>
<div id="main">
</div>
<div id="footer">
<h5>Copyright ©2015 </h5>
</div>
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
apiready = function(){
console.log("Hello APICloud");
var header = $api.byId('header');
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
var main = $api.byId('main');
var mainPos = $api.offset(main);
api.openFrame({
name: 'main',
url: 'html/main.html',
bounces: true,
rect: {
x: 0,
y: headerPos.h,
w: headerPos.w,
h: mainPos.h
}
});
};
</script>
</html>
mail.html如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
#con{
margin:10px;
font-size: 28px;
}
ul{
margin-bottom:10px;
}
.txt{
margin:5px 10px;
padding:5px;
color:#000;
word-wrap: break-word;
}
</style>
</head>
<body>
<label id="con">Hello APP</label>
<div id='sys-info'></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
var ver = api.version;
var sType = api.systemType;
var sVer = api.systemVersion;
var id = api.deviceId;
var model = api.deviceModel;
var name = api.deviceName;
var cType = api.connectionType;
var winName = api.winName;
var winWidth = api.winWidth;
var winHeight = api.winHeight;
var frameName = api.frameName||'';
var frameWidth = api.frameWidth||'';
var frameHeight = api.frameHeight||'';
var str = '<ul>';
str += '<li><div class="txt">引擎版本信息: ' + ver + '</div></li>';
str += '<li><div class="txt">系统类型: ' + sType + '</div></li>';
str += '<li><div class="txt">系统版本: ' + sVer + '</div></li>';
str += '<li><div class="txt">设备标识: ' + id + '</div></li>';
str += '<li><div class="txt">设备型号: ' + model + '</div></li>';
str += '<li><div class="txt">设备名称: ' + name + '</div></li>';
str += '<li><div class="txt">网络状态: ' + cType + '</div></li>';
str += '<li><div class="txt">主窗口名字: ' + winName + '</div></li>';
str += '<li><div class="txt">主窗口宽度: ' + winWidth + '</div></li>';
str += '<li><div class="txt">主窗口高度: ' + winHeight + '</div></li>';
str += '<li><div class="txt">子窗口名字: ' + frameName + '</div></li>';
str += '<li><div class="txt">子窗口宽度: ' + frameWidth + '</div></li>';
str += '<li><div class="txt">子窗口高度: ' + frameHeight + '</div></li>';
str += '</ul>';
$api.byId('sys-info').innerHTML = str;
};
</script>
</html>
因此,有代码可以知道,基本的功能都在对象api里面。在官网创建应用,选择相应的模块,然后就能生成带有特定功能api.js文件。
3、打包测试
可以选择本地打包,也可以同步到云端,在官网控制台进行打包。
iOS版本若无上传证书,就只能安装在越狱手机上。
本地快速生成安装包
现在着重来分析下页面的结构
在index.html中,我们就布局上下导航,中间内容区域通过openFrame或者openFrameGroup来加载其他页面的方式来实现。如果是打开一个窗口,通过openWin来打开一个页面,同理,然后打开的这个窗口里面再通过openFrame或或openFrameGroup来嵌套其他页面。
html5:在创建html时为了防止页面缩放等不兼容效果,要创建个viewport
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
在IOS设备上,有时会将数字转为手机号,这里也要禁止下
<meta name="format-detection" content="telephone=no"/>
CSS:在定义CSS时记得要定义下默认样式。
api.js: 为apicloud封装的js方法,如果使用记得先要引入,在script文件夹内。