创建第一个应用

APICloud自3.0起，已从跨平台技术全面升级为多端技术：

1. 开发者使用AVM.JS一个技术栈即可同时开发Android & iOS APP和小程序；
   2. 全新的APP引擎DeepEngine3.0提供完全原生的渲染，保障APP性能和体验与原生APP一致；
   3. 提供api对象下的接口直接映射兼容小程序接口，延续已有开发习惯；

同时APICloud3.0仍然保留了2.0的所有技术栈和开发体验，为方便开发者对跨平台技术和多端技术的理解和区分，我们对创建的应用类型进行了明确的区分。

主要包括4种类型：

1. Native App：

  即原生应用，3.0在2.0跨平台技术的基础上，新增了AVM.JS开发框架以及全新的原生App渲染引擎DeepEngine3.0。

  开发者可使用标准HTML5（包括HTML/CSS/JS技术以及Vue/React等框架技术）或AVM.JS技术进行开发，一套代码同时生成Android & iOS原生APP，现有的1000+功能模块和20000+API可直接调用。

  如果使用标准HTML5进行开发，App渲染依然使用2.0的Webview引擎进行渲染；

  如果使用AVM.JS进行开发，App将使用无Webview的原生引擎DeepEngine3.0进行渲染，所有组件及视图与Android & iOS系统原生组件和视图百分百对齐。例如使用list-view进行布局，意味着您的列表将具备回收能力，即使面对数以万计的列表项或者瀑布流图片，也不会产生因内存溢出而导致闪退的问题，并且在滑动性能和流畅度上远胜于Webview视图的DOM滑动。

  一个App可完全使用HTML5进行开发，也可以完全使用AVM.JS技术进行开发，或两者在同一个App中混合使用。

  ** Native App适合功能强大、性能卓越的APP开发，如果您仅有App需求，应选择Native App模式。

2. MX App：

  即多端应用(Multiexperience App)，使用AVM.JS技术一次开发，可同时生成小程序、Android & iOS App多终端应用，提供现有的api对象下的接口直接调用为小程序接口，例如api.ajax将对应调用小程序的wx.request。

  多端应用与Native App的区别在于，多端应用要求必须使用AVM.JS框架及语法进行开发，开发过程应使用文档中具有“通用”或者“小程序和App适用”标识的组件或者api进行开发，例如不应该在多端应用中使用list-view组件，因为list-view组件是专门为App定制的，它无法被编译为小程序(因为小程序平台并未提供类似的组件和能力)。

  ** MX App适合小程序优先的场景，如果您有小程序需求，而并不关心App侧的功能，应选择MX App模式。开发完的小程序代码，可百分百编译为同等功能的App，相当于开发一个小程序，“白送”一个 App。

3. App Clip：

  即iOS轻App，是苹果公司在iOS14最新推出的无需下载、即搜即用的全功能App，属于主App的一部分，可以理解为“苹果小程序”。

  轻App的开发流程同Native App基本一致，开发者可使用标准HTML5或AVM.JS技术进行开发，通过APICloud云编译可一键编译为轻App安装包，可用于对已有的主应用进行关联。如果您的主应用也是使用APICloud开发，云编译将提供主应用和轻App关联、证书配置等自动化功能。

4. Web App：

  提供将已有HTML5网站一键打包成Android & iOS原生APP的能力，远程web页面也能调用现有的1000+功能模块和20000+API。

  ** Web App适合Web优先，不介意用户体验和性能的场景。

本文档会逐步引导您创建并运行一个简单的应用，内容涉及开发工具使用、代码管理、应用预览、调试等，帮助您快速开始应用开发。

准备工作

下载并安装最新版本开发工具APICloud Studio 3，当前支持Windows、macOS、Linux系统。下载地址。

完整APICloud Studio 3使用教程参考APICloud Studio 3使用说明。

创建应用

当前提供了两种创建应用的方式，可以在网站开发控制台或APICloud Studio 3中创建应用，这里以在APICloud Studio 3中创建应用为例。

1、打开APICloud Studio 3，点击窗口右上角的 “未登录” 按钮，使用APICloud账号登录，若无账号可以点击 “立即注册” 按钮进行注册。

2、顶部菜单选择 “项目” - “新建项目”，然后填写“应用名称”，“应用说明”，应用框架处内置了几种模板，这里我们选择“空白应用”，点击“完成”，然后选择项目保存的路径，完成创建。

修改代码

在APICloud应用开发中，除了支持标准的html页面，还支持基于avm框架的stml页面，这两种页面可以在项目中灵活地混合使用。基于avm框架能够一套代码同时生成App、小程序端，avm框架使用参考APICloud3.0多端开发。

本节为演示基于avm框架进行多端开发做的一些修改，如果您选择使用html的方式开发应用，则可以跳过本节步骤。

由于小程序语法要求每个页面外层有一个同名文件夹，所以我们在项目pages目录下新建一个demo文件夹，然后将demo.stml移到demo文件夹下（若只支持App端则不需要）。然后在config.xml中将应用入口页设置为demo.stml，并配置avm字段为true。

简单地修改demo.stml文件，设置一下页面背景色，然后添加一个text组件，通过数据绑定设置其文本内容，并监听点击事件，在点击事件里面调用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>

提交代码

修改完代码后，我们将代码同步到云端，以便于云编译查看效果。在项目根目录上面鼠标右键，选择“提交到云端”。

输入修改的说明信息，点击commit提交。

除了使用APICloud Studio管理代码，开发者也可以选择自己熟悉的svn工具，在开发控制台代码页面将项目检出到本地。

App预览

如果要在iOS设备预览，需要先在证书界面上传编译证书才能编译应用。如果暂时没有苹果证书，可以安装AppLoader进行预览，参考后面的“应用调试”章节。

在项目根目录上面鼠标右键，选择“云编译”，将在APICloud studio内打开云编译界面。或者直接在浏览器里面打开云编译界面进行编译。

选择应用类别、平台，然后点击下面的“云编译”按钮开始编译。等待编译完成后扫描二维码即可安装。

App调试

为了提高开发效率，我们提供了WiFi真机同步功能，设备安装AppLoader或者自定义loader应用后，可以将APICloud Studio中的项目代码通过WiFi同步到loader中进行预览。AppLoader和自定义loader有以下区别：

AppLoader：由APICloud官方提供，iOS、Android设备可直接扫码安装，对于没有iOS证书的开发者比较方便，里面内置了部分平台常用的模块，可以将多个项目代码同步到里面查看。下载地址。

自定义loader：在APICloud Studio中项目根目录右键菜单选择“编译自定义Loader”进行编译，或者在编译自定义loader页面进行编译，iOS编译之前需上传编译证书，模块按照需要进行添加，只可同步一个项目到里面查看。和证书、包名相关的功能只能使用自定义loader测试。

如何通过WiFi同步代码到loader中参考WiFi真机同步（未处理）。

小程序预览和调试

准备工作

1、下载并安装微信开发者工具，下载地址。windows平台下，需要在APICloud Studio 3中配置微信开发者工具安装目录，具体操作步骤为：打开APICloud Studio 3设置界面 -- 常用配置 -- 微信开发者工具的根目录，配置微信开发者工具安装路径。

2、打开微信开发者工具，并进行登录。

3、为微信开发者工具打开服务端口，否则在APICloud Studio中无法调起微信开发者工具。具体操作步骤为：打开微信开发者工具 -- 设置 -- 安全设置 -- 安全 -- 开启服务端口。

预览和调试

回到APICloud Studio 3中，在项目根目录上面鼠标右键，选择“在微信开发者工具预览”，然后输入微信小程序appid，若没有则使用默认的。回车确认后项目将会被进行编译，编译完成后在项目根目录下会生成out-mp文件夹，里面为编译好的小程序项目。

APICloud Studio会自动打开微信开发者工具并加载out-mp下的小程序项目，等待项目加载完成即可查看。

当在APICloud Studio中修改了某个页面想要在微信开发者工具实时查看效果时，可以在项目根目录上面鼠标右键，选择“增量编译微信小程序”（或者直接使用对应快捷键），将会只编译修改的文件，编译完成后微信开发者工具里面会实时进行更新。

API和模块

API

api对象是开发中必须了解和熟练掌握的一个基础对象，提供了构建应用程序所需要的一些基本的方法，如窗口操作、网络请求等。api为内置js对象，不需要引用即可使用，更多详细介绍参考api文档（未处理）。

模块

模块是对api功能的一个扩展，平台模块Store里面提供了丰富的各种模块如百度地图、极光推送、微信登录等，使用模块之前需要先在开发控制台模块页面进行添加。或者通过config.xml中的feature字段添加模块，参考feature配置(未处理)。

如果平台模块不能满足项目需求，开发者也可以扩展自定义模块，开发完成后将模块包上传到“自定义模块”里面，然后添加使用。参考模块开发指南_iOS（未处理），模块开发指南_Android_Eclipse（未处理），模块开发指南_Android_Studio（未处理）。

注意：模块是原生功能的扩展，添加或更新模块后需要重新编译安装应用才生效。

代码中使用模块时需先通过api.require方法进行引用，如：

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


});

更多重要信息

config.xml配置文件

每一个应用的widget包必须有一个config.xml配置文件，它位于widget包的根目录下。该配置文件能配置应用入口页、应用偏好设置、权限配置、模块等等。更多config.xml配置可参考config.xml应用配置说明（未处理）。

前端开发框架

我们为前端开发者提供了api.css和api.js框架，api.css处理不同平台浏览器的默认样式，api.js提供最基础的JavaScript方法，所有方法在$api对象下。详情参考APICloud前端框架（未处理）。