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

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

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

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

主要包括4種類(lèi)型：

1. Native App：

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

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

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

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

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

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

2. MX App：

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

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

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

3. App Clip：

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

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

4. Web App：

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

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

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

準(zhǔn)備工作

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

完整APICloud Studio 3使用教程參考APICloud Studio 3使用說(shuō)明。

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

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

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

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

修改代碼

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

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

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

簡(jiǎn)單地修改demo.stml文件，設(shè)置一下頁(yè)面背景色，然后添加一個(gè)text組件，通過(guò)數(shù)據(jù)綁定設(shè)置其文本內(nèi)容，并監(jiān)聽(tīng)點(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>

提交代碼

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

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

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

App預(yù)覽

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

在項(xiàng)目根目錄上面鼠標(biāo)右鍵，選擇“云編譯”，將在APICloud studio內(nèi)打開(kāi)云編譯界面。或者直接在瀏覽器里面打開(kāi)云編譯界面進(jìn)行編譯。

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

App調(diào)試

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

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

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

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

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

準(zhǔn)備工作

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

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

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

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

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

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

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

API和模塊

API

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

模塊

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

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

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

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

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


});

更多重要信息

config.xml配置文件

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

前端開(kāi)發(fā)框架

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