零基礎學APICloud：第一講 Hello World!

阿新 • • 發佈：2019-01-16

下面簡單講解一下如何搭建開發環境和編譯出簡單的版本。

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資料夾內。

零基礎學APICloud：第一講 Hello World!

零基礎學APICloud：第一講 Hello World!

零基礎學python：併發伺服器、面向連線、多程序、多執行緒、單程序

【視頻】零基礎學Android開發：藍牙聊天室APP（一）

零基礎學python-1.5 第一個程序

嵩天老師的零基礎Python筆記：https://www.bilibili.com/video/av13570243/?from=search&seid=15873837810484552531 中的15-22講

嵩天老師的零基礎Python筆記：https://www.bilibili.com/video/av15123607/?from=search&seid=10211084839195730432#page=25 中的30-34講

嵩天老師的零基礎Python筆記：https://www.bilibili.com/video/av15123607/?from=search&seid=10211084839195730432#page=25 中的38-41講

零基礎學編程：零基礎學HTML+CSS (第3版) 完整pdf掃描版

Scala實戰高手****第2課：Scala零基礎實戰入門的第一堂課及如何成為Scala高手

第一天零基礎學ORACLE資料庫

零基礎學Java10系列三：Java高階程式設計

零基礎學Java10系列一：程式設計入門

零基礎學Java10系列二：面向物件程式設計

Maya零基礎新手入門教程第一部分：介面

零基礎學Java編程語言就要對癥下藥

零基礎學python-3.7 還有一個程序 python讀寫文本

關於零基礎學HTML5

零基礎學python-4.2 其它內建類型

零基礎學python-2.7 列表與元組

零基礎學並查集算法

零基礎學APICloud：第一講 Hello World!

相關推薦