apicloud使用指南

ApiCloud

ApiCloud平臺介紹

ApiCloud首頁
在線教程文檔
ApiCloud是一個國內的Hybird APP平臺，提供Hybird APP一站式開發服務。能夠將使用HTML、CSS和JS製做的應用直接編譯爲能在安卓和IOS平臺上運行的APP。另外，其所提供的代碼託管和在線編譯服務，能夠大大節省開發時間和開發成本。

環境搭建

註冊帳號

https://www.apicloud.com/signup

下載IDE

http://www.apicloud.com/devtools

安裝手機調試APP

能夠在開發軟件的幫助菜單中找到如下二維碼：

建立應用

刪除默認生成的launch和icon文件夾。

APP開發

配置config.xml

https://docs.apicloud.com/Dev...

<!--應用的ID和版本號，這裏的版本號沒有任何用處-->
<widget id="A6948895441294" version="0.0.1">  
    <!--啓動時自動打開的頁面，即名字爲root的window中顯示的頁面-->
    <content src="index.html"/>
    <!--APP背景（通常無需設置）-->
    <preference name="appBackground" value="rgba(0,0,0,0)"/>
    <!--window的默認背景（通常無需設置）-->
    <preference name="windowBackground" value="rgba(0,0,0,0)"/>  
    <!--frame的默認背景（通常無需設置）-->
    <preference name="frameBackgroundColor" value="rgba(0,0,0,0)"/> 
    <!--是否自動關閉啓動頁-->
    <preference name="autoLaunch" value="true"/>
    <!--是否自動雲端更新（通常無需設置）-->
    <preference name="autoUpdate" value="true"/>
    <!--是否容許雲端修復（通常無需設置）-->
    <preference name="smartUpdate" value="false"/>
    <!--是不是DEBUG模式（通常無需設置）-->
    <preference name="debug" value="true"/>
    <!--是不是沉浸式樣式-->
    <preference name="statusBarAppearance" value="true"/>
</widget>

沉浸式樣式

簡單開發

使用HTML、CSS和JS以及它們的衍生框架製做出移動端網頁，並在製做時注意如下問題：

一、每一個頁面的head部分加入

<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">

二、使用api.css做爲CSS Reset使用。
三、儘可能不要使用jQuery等比較重的前端框架去直接操做DOM。
四、佈局主要使用適配 -webkit- 的彈性盒子佈局。

編譯打包

一、將整個項目的代碼進行提交（右鍵項目—雲端同步—提交）。
二、在開發者控制檯（https://www.apicloud.com/console）中打開項目並繼續進行如下步驟。
三、端設置：設置安卓圖標（144像素的png圖像）和IOS圖標（1024像素的png圖像）。
四、證書：提供對應平臺的證書，安卓證書能夠在線生成，IOS證書須要使用IOS開發者帳號在IOS官方獲取。
五、代碼：根據代碼更新日誌確認代碼已經上傳完畢。
六、模塊：將項目中全部使用的模塊添加。
七、雲編譯：填寫應用名稱和英語名稱；選擇平臺、類型；填寫版本號；點擊雲編譯。

補充：3位版本號的通常計算規則

一、不影響功能的頁面更新或顯示性錯誤修復時增長最小的版本號。
二、沒有增長和刪除功能，只是對現有功能進行更新，並且能兼容舊版本的數據時增長中間的版本號。
三、增長或刪除功能，或者對現有功能進行更新後不能再兼容舊版本數據時增長最大的版本號。

三大原生布局系統

當然，使用本來的HTML+CSS+JS就能完成佈局和視圖切換。可是，爲了更好的原生兼容性和運行速度，推薦使用ApiCloud封裝好的原生布局系統： window 、 frame 和 widget 。

window

在APP中，window指用戶看到的整個屏幕。若是是非沉浸式樣式，window的繪製起點（x=0 y=0）爲通知欄如下的左上角；若是是沉浸式樣式，window的繪製起點（x=0 y=0）爲整個用戶屏幕的左上角。

window的寬度和高度是自動決定的，程序員沒法干涉。

frame

frame是指的用戶視圖的某個局部，它有本身的繪製起點和寬高。除非特殊場景須要（好比地圖），frame不能超出window之外。

在建立一個frame時，程序員能夠指定x、y、寬和高。

widget

考慮到運行效率和實現難度，有些效果使用HTML+CSS+JS不是很合適。此時，就要使用ApiCloud封裝好的原生模塊去顯示。

注意：widget必定會處於佈局的最上層，並且自己不參與頁面流，通常須要在頁面中使用其它佈局爲其預留位置。

tapmode

在須要監聽點擊事件的標籤（包括a標籤）中加入 tapmode 屬性能夠取消掉手機端JS對於點擊事件的300ms延遲（主要針對IOS系統，安卓系統使用viewport禁止縮放後會自動取消這個延遲）。

另外，tapmode屬性能夠接受一個class名做爲屬性值，當用戶按住這個標籤時，會自動使用這個class；當用戶鬆手後，會刪除這個class。

api和$api

api和$api是ApiCloud封裝的兩個JS對象，能夠在JS代碼中直接使用。

api主要封裝一些直接與安卓系統或IOS系統進行交互的native方法（好比獲取手機電量，調起攝像頭，引入其餘模塊，進行數據存取等）。

$api是相似於jQuery的前端輔助框架，比jQuery更加輕量級。（須要引入api.js）

api的主要用法

https://docs.apicloud.com/Cli...

由於api對象須要和系統進行交互，所以須要等待這個對象初始化完畢。須要訪問這個對象的代碼要放在如下結構中執行($api中大部分方法無此限制)：

apiready = function(){
    //在這裏裏面才能夠訪問api對象，不然會報api沒有定義的錯誤。
}

經常使用屬性

//當前網絡類型 
api.connectionType
"unknown"        //未知
"ethernet"       //以太網
"wifi"           //wifi
"2g"             //2G網絡
"3g"             //3G網絡
"4g"             //4G網絡
"none"           //無網絡

//window寬度，數字類型，以像素爲單位
api.winWidth
//window高度，數字類型，以像素爲單位
api.winHeight

//以json形式返回打開頁面時傳遞的參數，配合api.openWin()和api.openFrame()中的pageParam屬性使用
api.pageParam

//widget協議對應的目錄，爲只讀目錄，不要在應用運行期間向此目錄寫入
api.wgtRootDir
//fs協議對應的目錄
api.fsDir
//cache協議對應的目錄
api.cacheDir

調用api對象相關方法時的通用形式

//api對象上的方法（核心API）
api.方法名(參數,回調函數);
//引用其餘模塊
var module = api.require("模塊名");
module.方法名(參數,回調函數);

//參數均爲json參數
//若是有回調函數，那麼遵循這種格式：
function(ret,err){
    //ret爲方法成功執行時的結果
    //err爲方法執行失敗時的結果
}

文件協議

有不少應用都須要讀寫手機的本地文件，這自己能夠經過api對象或部分模塊中提供的方法來實現。在讀寫文件時，須要一個文件路徑來指定要讀寫的文件，爲了方便表示文件的路徑，ApiCloud封裝了多種文件協議。
注意：文件協議只能在JS方法中使用。若是要在HTML或CSS中使用，也要通過JS中轉一下。

widget://

與項目的根目錄對應，能夠在APP運行期間用來在JS裏直接獲取開發過程使用的文件。這個是隻讀目錄，不能在APP運行期間向內寫入。

fs://

使用fs模塊時經常使用的讀寫目錄，可用於永久存儲一些文件（以下載功能）。

cache://

應用緩存目錄。

配置存取

當須要存儲的數據比較多時，可使用文件來存儲。但大多數應用須要的存儲量不是很大（好比用戶對當前應用的主題選擇、不一樣網絡下的資源獲取、音量、是否容許通知等），此時就可使用配置存取的api來操做。

prefs相關

由系統底層實現，理論上無容量限制。

//存值，值必須爲字符串
api.setPrefs({key:"鍵",value:"值"});
//取值
var 值 = api.getPrefs({key:"鍵",sync:true});
//刪除
api.removePrefs({key:"鍵"});

storage相關

由HTML5新對象localStorage實現，有容量限制。

//存值，若是值爲對象，則必須是能夠被json序列化的對象
$api.setStorage("鍵",值);
//取值
var 值 = $api.getStorage("鍵");
//刪除
$api.rmStorage("鍵")
//清空
$api.clearStorage()

窗口操做

api.openWin()