. 一套代码可编译为对应Android 、iOS、微信小程序、iOS 轻App、H5端的安装包或代码包。
2. 兼容APICloud2.0技术栈，这意味着平台上上千款Android iOS原生模块可供使用。或者在老项目里部分引入3.0的技术，对APP局部进行优化。
3. 原生引擎渲染。如果使用 avm.js 进行开发，App 将使用无 webView 的原生引擎 3.0 进行渲染，所有组件及视图与 Android & iOS 系统原生组件和视图百分百对齐。
4. 类Vue语法和兼容 React JSX。有Vue或React基础的用户可以很快上手。
5. 组件化开发，提升代码复用率。
AVM中的页面介绍：
AVM中的页面称为stml页面，一个典型的stml 文件代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <template>
<view>
<view class="header">
<text>{title}</text>
</view>
<view class="content">
<text>{content}</text>
</view>
<view class="footer">
<text>{footer}</text>
</view>
</view>
</template>
<style>
.header {
height: 45px;
}
.content {
flex-direction:row;
}
.footer {
height: 55px;
}
</style>
<script>
export default {
name: 'api-test',
apiready(){
console.log("Hello APICloud");
},
data(){
return {
title: 'Hello App',
content: 'this is content',
footer: 'this is footer'
}
}
}
</script>
|
数据绑定
从上面代码段中可以看到数据绑定方式为{变量},同时支持双大括号、单大括号将变量或表达式包起来，可以用于绑定文本内容或元素属性。
事件绑定
监听事件有两种方式。
使用 on 监听：
| <text onclick="doThis">Click me!</text>
|
使用 v-on 指令以及缩写方式监听：
| <text v-on:click="doThis">Click me!</text>
<text @click="doThis">Click me!</text>
|
事件处理方法
事件的处理方法需要在 methods 中定义，方法默认包含一个参数，可以通过该参数获取 detail、currentTarget 对象等。
| <template>
<text data-name="avm" onclick="doThis">Click me!</text>
</template>
<script>
export default {
name: 'test',
methods: {
doThis(e){
api.alert({
msg:e.currentTarget.dataset.name
});
}
}
}
</script>
|
事件处理方法也可以使用模板的方式，如：
| <text onclick={this.doThis}>Click me!</text>
|
默认组件举几个例子说明，更多组件可查看官方文档。
view 是通用容器组件，内部可以放置任意组件。默认布局方式为flex布局。
注意不要直接在 view 内添加文本，添加文本使用 text 组件。
text 组件用于显示文本信息。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <template>
<scroll-view class="main" scroll-y>
<text class="text">普通文本</text>
<text class="text bold">粗体文本</text>
<text class="text italic">斜体文本</text>
<text class="text shadow">Text-shadow 效果</text>
</scroll-view>
</template>
<style>
.main {
width: 100%;
height: 100%;
}
.text {
height: 30px;
font-size: 18px;
}
.bold {
font-weight:bold;
}
.italic {
font-style:italic;
}
.shadow {
text-shadow:2px 2px #f00;
}
</style>
<script>
export default {
name: 'test'
}
</script>
|
image 组件用于显示图片。
button 组件定义一个按钮。
input 组件定义一个输入框。
swiper 定义滑动视图，支持上下或左右滑动。其中只可放置 swiper-item 组件。
scroll-view 定义滚动视图。
若需要在垂直方向滚动，则需要指定高度；若在水平方向滚动，则需要指定宽度，否则可能无法显示。
ist-view 定义可复用内容的竖向滚动视图，可以优化内存占用和渲染性能，支持下拉刷新和上拉加载。可使用 scroll-view 的基本属性。
list-view 里面可放置 cell、list-header、list-footer、refresh 等组件，使用 cell 组件作为每项显示内容。
frame 组件用于显示一个frame，效果同openFrame 方法一致。
frame-group 组件用于显示一个 frame 组，里面的每个 frame 为一个独立的页面。
组件化开发
定义一个组件：
使用stml定义一个组件 api-test.stml：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <template>
<view class='header'>
<text>{this.data.title}</text>
</view>
</template>
<script>
export default {
name: 'api-test',
data(){
return {
title: 'Hello APP'
}
}
}
</script>
<style scoped>
.header{
height: 45px;
}
</style>
|
引用组件：
在其他页面或组件引用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | // app-index.stml:
<template>
<view class="app">
<img src="./assets/logo.png" />
<api-test></api-test>
</view>
</template>
<script>
import './components/api-test.stml'
export default {
name: 'app-index',
data: function () {
return {
title: 'Hello APP'
}
}
}
</script>
<style>
.app {
text-align: center;
margin-top: 60px;
}
</style>
|
使用JS定义一个组件 / 页面 ，参考官方文档。
组件生命周期
avm.js组件规范符合Web Components规范，生命周期遵循标准Web Components组件的生命周期。同时兼容Vue组件的生命周期。
所有支持的生命周期事件
生命周期函数名 | 触发时机 |
apiready | 页面运行时环境准备完毕&渲染完毕。当页面未引入组件时，该事件等同于installed。 |
install | 组件被挂载到真实DOM（或App原生界面）之前 |
installed | 组件被挂载到真实DOM（或App原生界面）之后。在页面级别中，该事件等同于apiready。 |
render | 组件开始渲染 |
uninstall | 组件从真实DOM（或App原生界面）移除之前 |
beforeUpdate | 组件更新之前 |
updated | 组件更新完成 |
beforeRender | 组件开始渲染之前 |
『每个页面都应实现apiready，并在apiready后处理业务逻辑；installed属于组件级别生命周期，在页面加载组件过程中即被触发，其触发时机早于apiready』
生命周期更多详情 参考官方文档
总体而言，APICloud这款开发框架，比较趋近于原生的编程体验，通过简洁的模式来分离应用的用户界面、业务逻辑和数据模型，适合高度定制化的项目，另外APICloud网站上提供了很多模块、实例和工具源码的下载，感兴趣的前端小伙伴不妨点击这里尝试下吧。
