ApiCloud

ApiCloud平臺介紹

ApiCloud首頁
在線教程文檔
ApiCloud是一個國內的Hybird APP平臺，提供Hybird APP一站式開發服務?？梢詫⑹褂肏TML、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以及它們的衍生框架制作出移動端網頁，并在制作時注意以下問題：

1、每個頁面的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">

2、使用api.css作為CSS Reset使用。
3、盡量不要使用jQuery等比較重的前端框架去直接操作DOM。
4、布局主要使用適配 -webkit- 的彈性盒子布局。

編譯打包

1、將整個項目的代碼進行提交（右鍵項目—云端同步—提交）。
2、在開發者控制臺（https://www.apicloud.com/console）中打開項目并繼續進行以下步驟。
3、端設置：設置安卓圖標（144像素的png圖像）和IOS圖標（1024像素的png圖像）。
4、證書：提供對應平臺的證書，安卓證書可以在線生成，IOS證書需要使用IOS開發者賬號在IOS官方獲取。
5、代碼：根據代碼更新日志確認代碼已經上傳完畢。
6、模塊：將項目中所有使用的模塊添加。
7、云編譯：填寫應用名稱和英語名稱；選擇平臺、類型；填寫版本號；點擊云編譯。

補充：3位版本號的一般計算規則

1、不影響功能的頁面更新或顯示性錯誤修復時增加最小的版本號。
2、沒有增加和刪除功能，只是對現有功能進行更新，而且能兼容舊版本的數據時增加中間的版本號。
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()

總結

以上是生活随笔為你收集整理的apicloud使用指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。