创建第一个应用

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

准备工作

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

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

创建应用

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

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

图片说明

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

图片说明

修改代码

在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前端框架