创建第一个应用
本文档会逐步引导您创建并运行一个简单的应用，内容涉及开发工具使用、代码管理、应用预览、调试等，帮助您快速开始应用开发。
准备工作
下载并安装最新版本开发工具YonStudio，当前支持Windows、macOS、Linux系统。下载地址。
完整YonStudio使用教程参考YonStudio使用说明。
创建应用
当前提供了两种创建应用的方式
1. 可以在用友开发者中心的移动控制台中创建应用
2 YonStudio中创建应用。
由于Web网页端仅是创建应用项目，而具体的开发操作主要还是在YonStudio开发工具中操作，所以本教程以YonStudio中创建应用为例进行示范讲解。
1、打开YonStudio，点击窗口左侧工具栏底部的登录按钮进行账号登录。
2、顶部菜单选择 “项目” - “新建项目”，或直接点击工具主页内的「创建项目」按钮，打开创建应用对话窗口
然后填写“应用名称”，“应用描述”，应用模板处内置了几种模板，这里我们选择“空白模板”，在”使用AVM“选项上，可以根据开发者需求自行选择是否激活使用avm开发模式，则会最后点击“确认”，然后选择项目保存的路径，完成创建。
『注意』：使用avm，开发工具将创建基于AVM多端框架的多端开发应用工程代码，不使用avm时，工具将创建以Web为主支持标准的html页面的混合开发应用项目工程代码
修改代码
在YonBuilder移动开发应用开发中，除了支持标准的html页面，还支持基于avm框架的stml页面，这两种页面可以在项目中灵活地混合使用。基于avm框架能够一套代码同时生成App、小程序端，avm框架使用参考AVM多端开发。
本节为演示基于avm框架进行多端开发做的一些修改，如果您选择使用html的方式开发应用，则可以跳过本节步骤。
由于小程序语法要求每个页面外层有一个同名文件夹，所以我们在项目pages目录下新建一个demo文件夹，然后在鼠标右键点击demo文件夹，新建demo.stml文件。
将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>
提交代码
修改完代码后，我们将代码同步提交到云端，以便于移动打包时可以基于我们最新的代码进行编译打包。 登录官网的移动开发控制台，选择应用进入应用管理界面，切换到「代码上传」页面，进行代码上传，一共提供以下下种代码上传方式
1. 通过第三方Git仓库上传
可以选择在第三方Git平台建立一个应用代码的仓库，然后填入响应的仓库地址、访问密码等相关信息，后续进行编译打包时，将会自动拉取仓库的最新代码进行编译打包。
2. 将本地文件压缩成widget.zip文件进行上传
3. 将提供可通过网络下载的第三方链接地址
需要提醒注意的是，无论是哪种方式，建议项目代码的整体结构都是最外层的文件夹名称需要命名为widget的,具体项目结构参见下图
这里我们选择最简单的方式，及第二种「代码包」上传，将整个项目文件压缩成widget.zip压缩包，然后进行上传
App预览
如果要在iOS设备预览，需要先在应用管理的「APP证书」页面上传编译证书才能编译应用。如果暂时没有苹果证书，可以安装AppLoader进行预览，参考后面的“应用调试”章节。
在项目根目录上面鼠标右键，选择“移动打包”，将在YonStudio内打开移动打包界面。或者直接在浏览器里面访问移动控制台的「移动打包」界面进行编译。
选择填写应用名称、应用类别、平台、类型等信息内容然后，点击下面的“开始打包”按钮开始编译。等待编译完成后扫描二维码即可安装。
App调试
为了提高开发效率，我们提供了WiFi真机同步功能，设备安装AppLoader或者自定义loader应用后，可以将YonStudio中的项目代码通过WiFi同步到loader中进行预览。AppLoader和自定义loader有以下区别：
AppLoader：由官方提供，iOS、Android设备可直接扫码安装，对于没有iOS证书的开发者比较方便，里面内置了部分平台常用的移动原生插件，可以将多个项目代码同步到里面查看。下载地址。
自定义loader：在YonStudio中项目根目录右键菜单选择“编译自定义Loader”进行编译，或者在云端「移动开发控制台」-选择并进入具体应用-「移动插件」-「loader调试」界面进行编译，iOS编译之前需上传编译证书，插件按照需要进行添加，只可同步一个项目到里面查看。和证书、包名相关的功能只能使用自定义loader测试。
如何通过WiFi同步代码到loader中参考WiFi真机同步。
API和移动插件
API.js
api对象是开发中必须了解和熟练掌握的一个基础对象，提供了构建应用程序所需要的一些基本的方法，如窗口操作、网络请求等。api为内置js对象，不需要引用即可使用，更多详细介绍参考api.js文档)。
移动插件
移动插件是对api功能的一个扩展，平台云市场内提供了丰富的各种移动原生插件如百度地图、极光推送、微信登录等，使用移动原生插件之前需要先在移动开发控制台的移动插件界面进行添加。或者通过config.xml中的feature字段添加移动原生插件，参考feature配置。
如果平台移动原生插件不能满足项目需求，开发者也可以扩展自定义移动原生插件，开发完成后将移动原生插件包上传到“自定义插件”里面，然后添加使用。参考移动原生插件开发指南-iOS，移动原生插件开发指南-AndroidEclipse，移动原生插件开发指南-AndroidStudio。
注意：移动原生插件是原生功能的扩展，添加或更新移动原生插件后需要重新编译安装应用才生效。
代码中使用移动原生插件时需先通过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对象下。详情参考YonBuilder移动开发前端框架。