創(chuàng)建第一個應(yīng)用

APICloud自3.0起，已從跨平臺技術(shù)全面升級為多端技術(shù)：

1. 開發(fā)者使用AVM.JS一個技術(shù)棧即可同時開發(fā)Android & iOS APP和小程序；
   2. 全新的APP引擎DeepEngine3.0提供完全原生的渲染，保障APP性能和體驗(yàn)與原生APP一致；
   3. 提供api對象下的接口直接映射兼容小程序接口，延續(xù)已有開發(fā)習(xí)慣；

同時APICloud3.0仍然保留了2.0的所有技術(shù)棧和開發(fā)體驗(yàn)，為方便開發(fā)者對跨平臺技術(shù)和多端技術(shù)的理解和區(qū)分，我們對創(chuàng)建的應(yīng)用類型進(jìn)行了明確的區(qū)分。

主要包括4種類型：

1. Native App：

??即原生應(yīng)用，3.0在2.0跨平臺技術(shù)的基礎(chǔ)上，新增了AVM.JS開發(fā)框架以及全新的原生App渲染引擎DeepEngine3.0。

??開發(fā)者可使用標(biāo)準(zhǔn)HTML5（包括HTML/CSS/JS技術(shù)以及Vue/React等框架技術(shù)）或AVM.JS技術(shù)進(jìn)行開發(fā)，一套代碼同時生成Android & iOS原生APP，現(xiàn)有的1000+功能模塊和20000+API可直接調(diào)用。

??如果使用標(biāo)準(zhǔn)HTML5進(jìn)行開發(fā)，App渲染依然使用2.0的Webview引擎進(jìn)行渲染；

??如果使用AVM.JS進(jìn)行開發(fā)，App將使用無Webview的原生引擎DeepEngine3.0進(jìn)行渲染，所有組件及視圖與Android & iOS系統(tǒng)原生組件和視圖百分百對齊。例如使用list-view進(jìn)行布局，意味著您的列表將具備回收能力，即使面對數(shù)以萬計的列表項或者瀑布流圖片，也不會產(chǎn)生因內(nèi)存溢出而導(dǎo)致閃退的問題，并且在滑動性能和流暢度上遠(yuǎn)勝于Webview視圖的DOM滑動。

??一個App可完全使用HTML5進(jìn)行開發(fā)，也可以完全使用AVM.JS技術(shù)進(jìn)行開發(fā)，或兩者在同一個App中混合使用。

??** Native App適合功能強(qiáng)大、性能卓越的APP開發(fā)，如果您僅有App需求，應(yīng)選擇Native App模式。

2. MX App：

??即多端應(yīng)用(Multiexperience App)，使用AVM.JS技術(shù)一次開發(fā)，可同時生成小程序、Android & iOS App多終端應(yīng)用，提供現(xiàn)有的api對象下的接口直接調(diào)用為小程序接口，例如api.ajax將對應(yīng)調(diào)用小程序的wx.request。

??多端應(yīng)用與Native App的區(qū)別在于，多端應(yīng)用要求必須使用AVM.JS框架及語法進(jìn)行開發(fā)，開發(fā)過程應(yīng)使用文檔中具有“通用”或者“小程序和App適用”標(biāo)識的組件或者api進(jìn)行開發(fā)，例如不應(yīng)該在多端應(yīng)用中使用list-view組件，因?yàn)閘ist-view組件是專門為App定制的，它無法被編譯為小程序(因?yàn)樾〕绦蚱脚_并未提供類似的組件和能力)。

??** MX App適合小程序優(yōu)先的場景，如果您有小程序需求，而并不關(guān)心App側(cè)的功能，應(yīng)選擇MX App模式。開發(fā)完的小程序代碼，可百分百編譯為同等功能的App，相當(dāng)于開發(fā)一個小程序，“白送”一個 App。

3. App Clip：

??即iOS輕App，是蘋果公司在iOS14最新推出的無需下載、即搜即用的全功能App，屬于主App的一部分，可以理解為“蘋果小程序”。

??輕App的開發(fā)流程同Native App基本一致，開發(fā)者可使用標(biāo)準(zhǔn)HTML5或AVM.JS技術(shù)進(jìn)行開發(fā)，通過APICloud云編譯可一鍵編譯為輕App安裝包，可用于對已有的主應(yīng)用進(jìn)行關(guān)聯(lián)。如果您的主應(yīng)用也是使用APICloud開發(fā)，云編譯將提供主應(yīng)用和輕App關(guān)聯(lián)、證書配置等自動化功能。

4. Web App：

??提供將已有HTML5網(wǎng)站一鍵打包成Android & iOS原生APP的能力，遠(yuǎn)程web頁面也能調(diào)用現(xiàn)有的1000+功能模塊和20000+API。

??** Web App適合Web優(yōu)先，不介意用戶體驗(yàn)和性能的場景。

本文檔會逐步引導(dǎo)您創(chuàng)建并運(yùn)行一個簡單的應(yīng)用，內(nèi)容涉及開發(fā)工具使用、代碼管理、應(yīng)用預(yù)覽、調(diào)試等，幫助您快速開始應(yīng)用開發(fā)。

準(zhǔn)備工作

下載并安裝最新版本開發(fā)工具APICloud Studio 3，當(dāng)前支持Windows、macOS、Linux系統(tǒng)。下載地址。

完整APICloud Studio 3使用教程參考APICloud Studio 3使用說明。

創(chuàng)建應(yīng)用

當(dāng)前提供了兩種創(chuàng)建應(yīng)用的方式，可以在網(wǎng)站開發(fā)控制臺或APICloud Studio 3中創(chuàng)建應(yīng)用，這里以在APICloud Studio 3中創(chuàng)建應(yīng)用為例。

1、打開APICloud Studio 3，點(diǎn)擊窗口右上角的 “未登錄” 按鈕，使用APICloud賬號登錄，若無賬號可以點(diǎn)擊 “立即注冊” 按鈕進(jìn)行注冊。

2、頂部菜單選擇 “項目” - “新建項目”，然后填寫“應(yīng)用名稱”，“應(yīng)用說明”，應(yīng)用框架處內(nèi)置了幾種模板，這里我們選擇“空白應(yīng)用”，點(diǎn)擊“完成”，然后選擇項目保存的路徑，完成創(chuàng)建。

修改代碼

在APICloud應(yīng)用開發(fā)中，除了支持標(biāo)準(zhǔn)的html頁面，還支持基于avm框架的stml頁面，這兩種頁面可以在項目中靈活地混合使用?；赼vm框架能夠一套代碼同時生成App、小程序端，avm框架使用參考APICloud3.0多端開發(fā)。

本節(jié)為演示基于avm框架進(jìn)行多端開發(fā)做的一些修改，如果您選擇使用html的方式開發(fā)應(yīng)用，則可以跳過本節(jié)步驟。

由于小程序語法要求每個頁面外層有一個同名文件夾，所以我們在項目pages目錄下新建一個demo文件夾，然后將demo.stml移到demo文件夾下（若只支持App端則不需要）。然后在config.xml中將應(yīng)用入口頁設(shè)置為demo.stml，并配置avm字段為true。

簡單地修改demo.stml文件，設(shè)置一下頁面背景色，然后添加一個text組件，通過數(shù)據(jù)綁定設(shè)置其文本內(nèi)容，并監(jiān)聽點(diǎn)擊事件，在點(diǎn)擊事件里面調(diào)用api方法顯示提示框。完整代碼如下：

<template name='tpl'>
    <view class="page">
        <text class="text" data-info={text} onclick={this.btnAction}>{text}</text>
    </view>
</template>
<script>
    export default {
        name: 'tpl',
        apiready(){//like created


        },
        data() {
            return{
                text: 'Hello world!'
            }
        },
        methods: {
            btnAction(e){
                api.alert({
                    msg: e.currentTarget.dataset.info
                });
            }
        }
    }
</script>
<style>
    .page {
        height: 100%;
        background-color: white;
    }
    .text {
        margin-top: 100px;
        text-align: center;
    }
    .text:active {
        opacity: 0.7;
    }
</style>

提交代碼

修改完代碼后，我們將代碼同步到云端，以便于云編譯查看效果。在項目根目錄上面鼠標(biāo)右鍵，選擇“提交到云端”。

輸入修改的說明信息，點(diǎn)擊commit提交。

除了使用APICloud Studio管理代碼，開發(fā)者也可以選擇自己熟悉的svn工具，在開發(fā)控制臺代碼頁面將項目檢出到本地。

App預(yù)覽

如果要在iOS設(shè)備預(yù)覽，需要先在證書界面上傳編譯證書才能編譯應(yīng)用。如果暫時沒有蘋果證書，可以安裝AppLoader進(jìn)行預(yù)覽，參考后面的“應(yīng)用調(diào)試”章節(jié)。

在項目根目錄上面鼠標(biāo)右鍵，選擇“云編譯”，將在APICloud studio內(nèi)打開云編譯界面?；蛘咧苯釉跒g覽器里面打開云編譯界面進(jìn)行編譯。

選擇應(yīng)用類別、平臺，然后點(diǎn)擊下面的“云編譯”按鈕開始編譯。等待編譯完成后掃描二維碼即可安裝。

App調(diào)試

為了提高開發(fā)效率，我們提供了WiFi真機(jī)同步功能，設(shè)備安裝AppLoader或者自定義loader應(yīng)用后，可以將APICloud Studio中的項目代碼通過WiFi同步到loader中進(jìn)行預(yù)覽。AppLoader和自定義loader有以下區(qū)別：

AppLoader：由APICloud官方提供，iOS、Android設(shè)備可直接掃碼安裝，對于沒有iOS證書的開發(fā)者比較方便，里面內(nèi)置了部分平臺常用的模塊，可以將多個項目代碼同步到里面查看。下載地址。

自定義loader：在APICloud Studio中項目根目錄右鍵菜單選擇“編譯自定義Loader”進(jìn)行編譯，或者在編譯自定義loader頁面進(jìn)行編譯，iOS編譯之前需上傳編譯證書，模塊按照需要進(jìn)行添加，只可同步一個項目到里面查看。和證書、包名相關(guān)的功能只能使用自定義loader測試。

如何通過WiFi同步代碼到loader中參考WiFi真機(jī)同步（未處理）。

小程序預(yù)覽和調(diào)試

準(zhǔn)備工作

1、下載并安裝微信開發(fā)者工具，下載地址。windows平臺下，需要在APICloud Studio 3中配置微信開發(fā)者工具安裝目錄，具體操作步驟為：打開APICloud Studio 3設(shè)置界面 -- 常用配置 -- 微信開發(fā)者工具的根目錄，配置微信開發(fā)者工具安裝路徑。

2、打開微信開發(fā)者工具，并進(jìn)行登錄。

3、為微信開發(fā)者工具打開服務(wù)端口，否則在APICloud Studio中無法調(diào)起微信開發(fā)者工具。具體操作步驟為：打開微信開發(fā)者工具 -- 設(shè)置 -- 安全設(shè)置 -- 安全 -- 開啟服務(wù)端口。

預(yù)覽和調(diào)試

回到APICloud Studio 3中，在項目根目錄上面鼠標(biāo)右鍵，選擇“在微信開發(fā)者工具預(yù)覽”，然后輸入微信小程序appid，若沒有則使用默認(rèn)的?；剀嚧_認(rèn)后項目將會被進(jìn)行編譯，編譯完成后在項目根目錄下會生成out-mp文件夾，里面為編譯好的小程序項目。

APICloud Studio會自動打開微信開發(fā)者工具并加載out-mp下的小程序項目，等待項目加載完成即可查看。

當(dāng)在APICloud Studio中修改了某個頁面想要在微信開發(fā)者工具實(shí)時查看效果時，可以在項目根目錄上面鼠標(biāo)右鍵，選擇“增量編譯微信小程序”（或者直接使用對應(yīng)快捷鍵），將會只編譯修改的文件，編譯完成后微信開發(fā)者工具里面會實(shí)時進(jìn)行更新。

API和模塊

API

api對象是開發(fā)中必須了解和熟練掌握的一個基礎(chǔ)對象，提供了構(gòu)建應(yīng)用程序所需要的一些基本的方法，如窗口操作、網(wǎng)絡(luò)請求等。api為內(nèi)置js對象，不需要引用即可使用，更多詳細(xì)介紹參考api文檔（未處理）。

模塊

模塊是對api功能的一個擴(kuò)展，平臺模塊Store里面提供了豐富的各種模塊如百度地圖、極光推送、微信登錄等，使用模塊之前需要先在開發(fā)控制臺模塊頁面進(jìn)行添加?；蛘咄ㄟ^config.xml中的feature字段添加模塊，參考feature配置(未處理)。

如果平臺模塊不能滿足項目需求，開發(fā)者也可以擴(kuò)展自定義模塊，開發(fā)完成后將模塊包上傳到“自定義模塊”里面，然后添加使用。參考模塊開發(fā)指南_iOS（未處理），模塊開發(fā)指南_Android_Eclipse（未處理），模塊開發(fā)指南_Android_Studio（未處理）。

注意：模塊是原生功能的擴(kuò)展，添加或更新模塊后需要重新編譯安裝應(yīng)用才生效。

代碼中使用模塊時需先通過api.require方法進(jìn)行引用，如：

var fs = api.require('fs');
fs.exist({
    path: 'fs://file.txt'
}, function(ret, err) {


});

更多重要信息

config.xml配置文件

每一個應(yīng)用的widget包必須有一個config.xml配置文件，它位于widget包的根目錄下。該配置文件能配置應(yīng)用入口頁、應(yīng)用偏好設(shè)置、權(quán)限配置、模塊等等。更多config.xml配置可參考config.xml應(yīng)用配置說明（未處理）。

前端開發(fā)框架

我們?yōu)榍岸碎_發(fā)者提供了api.css和api.js框架，api.css處理不同平臺瀏覽器的默認(rèn)樣式，api.js提供最基礎(chǔ)的JavaScript方法，所有方法在$api對象下。詳情參考APICloud前端框架（未處理）。