兼容和继承APICloud所有API、模块、技术栈以及用户体验的基础上，APICloud定义了一套新的代码编写标准(DSL)：
基于标准Web Components组件化思想，兼容Vue / React语法特性，通过一次编码，分别编译为APP、小程序代码，实现多端开发。
APP代码使用DeepEngine3.0运行，全翻译式的运行原理提供完全原生的体验和性能。无论是面向APP还是小程序打造应用，本文档都可以提供您所需的指南和API参考。
搭建开发环境
在进行开发之前，需要下载安装APICloud Studio3工具，通过Studio3新建和编写stml页面并预览调试，参考开发工具。
编写stml文件
stml（single template markup language）文件是一个专用的文件类型，其结构和Vue的单文件组件 (SFC)相似，用类Html语法描述一个组件/页面。更多关于stml可参考stml页面介绍。
在创建stml文件之前，我们需要在项目根目录下新建一个pages目录，只有放置在pages目录下的stml文件才会被正确编译。
打开APICloud Studio 3并导入项目，在项目结构的pages目录上点鼠标右键，在弹出的菜单中选择“新建stml文件”，然后输入文件名回车确认，这样就创建了一个默认的空白的stml页面，我们可以简单的添加一个text文本。
<template name='tpl'>
<view class="page">
<text>APICloud</text>
</view>
</template>
<script>
export default{
name: 'tpl',
apiready(){//like created
},
data() {
return{
}
},
methods: {
}
}
</script>
<style>
.page {
height: 100%;
}
</style>
预览stml文件
预览stml文件效果有以下三种方式：
实时预览
在stml页面编辑区内点鼠标右键，选择“实时预览”，将会启动Studio3的内置浏览器进行预览。
WiFi真机实时预览
使用WiFi真机实时预览时，需要手机端安装AppLoader或者自定义loader，并在loader内连接Studio。在stml页面编辑区内点鼠标右键，选择“WiFi真机实时预览”，页面将会自动在已连接Studio的手机端loader里面显示。
WiFi同步
通过WiFi同步将Studio里面代码同步到手机端loader里面，通过api.openWin、api.openFrame等方法打开stml页面进行预览：
api.openWin({
name: 'test',
url: '../pages/test.stml',
avm: true
});
示例代码
本页面演示如何使用avm.js语法的两种模式之一，单文件模式，定义一个页面或者组件，并渲染到终端。
使用单文件模式，stml文件定义一个组件 / 页面
stml组件 / 页面符合Vue单文件组件(SFC)规范，最终被编译为JS组件 / 页面，渲染到不同终端。
定义页面或组件：
// api-test.stml:
<template>
<view>
<text>Hello APP</text>
</view>
</template>
<script>
export default {
name: 'ApiTest'
}
</script>
添加样式：
<template>
<view class='header'>
<text>Hello APP</text>
</view>
</template>
<script>
export default {
name: 'ApiTest'
}
</script>
<style>
.header{
height: 45px;
}
</style>
数据绑定：
<template>
<view class='header'>
<text>{this.data.title}</text>
</view>
</template>
<script>
export default {
name: 'ApiTest',
data(){
return {
title: 'Hello APP'
}
}
}
</script>
<style>
.header{
height: 45px;
}
</style>
stml定义组件 / 页面在被编译为js组件过程中，会自动生成渲染代码。
API和模块使用
avm.js兼容和继承APICloud所有API、模块、技术栈以及开发体验，因此，api以及模块的使用及调试方式遵循APICloud现有标准及习惯。
api对象使用：
<template>
<view class='header'>
<text>{this.data.title}</text>
</view>
</template>
<script>
export default {
name: 'ApiTest',
apiready(){
api.toast({msg: '网络错误'});
this.data.title = '网络错误';
},
data(){
return {
title: 'Hello APP'
}
}
}
</script>
<style>
.header{
height: 45px;
}
</style>
模块使用：
<template>
<view class='header'>
<text>{this.data.title}</text>
</view>
</template>
<script>
export default {
name: 'ApiTest',
apiready(){
var mam = api.require('mam');
mam.checkUpdate(function(ret, err){
if (ret) {
api.toast({msg: '成功'});
} else {
api.toast({msg: '失败'});
}
});
},
data(){
return {
title: 'Hello APP'
}
}
}
</script>
<style>
.header{
height: 45px;
}
</style>
