零基础学APICloud：第一讲 Hello World!

本文主要是介绍零基础学APICloud：第一讲 Hello World!，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

下面简单讲解一下如何搭建开发环境和编译出简单的版本。

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 &copy;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>

上述文件是在页面中间新建一个空间，绘制main.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文件夹内。