结合AVM官网的介绍和我自己的一些实践经验，我总结了一系列AVM的特性，我想这些内容足以让你主动去学习AVM框架了。
- 一套代码可编译为对应Android 、iOS 、微信小程序、iOS 轻App、H5端的安装包或代码包。
- 兼容APICloud2.0技术栈，这意味着平台上上千款Android iOS原生模块可供使用。或者在老项目里部分引入3.0的技术，对APP局部进行优化。
- 原生引擎渲染。如果使用 avm.js 进行开发，App 将使用无 webView 的原生引擎 3.0 进行渲染，所有组件及视图与 Android & iOS 系统原生组件和视图百分百对齐。
- 类Vue语法和兼容 React JSX。有Vue或React基础的用户可以很快上手。
- 组件化开发，提升代码复用率。
AVM中的页面介绍：
AVM中的页面称为stml页面，一个典型的 stml 文件代码如下：
1. <template>
2. <view>
3. <view class="header">
4. <text>{title}</text>
5. </view>
6. <view class="content">
7. <text>{content}</text>
8. </view>
9. <view class="footer">
10. <text>{footer}</text>
11. </view>
12. </view>
13. </template>
14. <style>
15. .header {
16. height: 45px;
17. }
18. .content {
19. flex-direction:row;
20. }
21. .footer {
22. height: 55px;
23. }
24. </style>
25. <script>
26. export default {
27. name: 'api-test',
28.
29. apiready(){
30. console.log("Hello APICloud");
31. },
32.
33. data(){
34. return {
35. title: 'Hello App',
36. content: 'this is content',
37. footer: 'this is footer'
38. }
39. }
40. }
41. </script>
数据绑定
从上面代码段中可以看到数据绑定方式为{变量},同时支持双大括号、单大括号将变量或表达式包起来，可以用于绑定文本内容或元素属性。
事件绑定
监听事件有两种方式。
使用 on 监听：
Click me!
使用 v-on 指令以及缩写方式监听：
Click me!
<text @click="doThis">Click me!
事件处理方法
事件的处理方法需要在 methods 中定义，方法默认包含一个参数，可以通过该参数获取 detail、currentTarget 对象等。
1. <template>
2. <text data-name="avm" onclick="doThis">Click me!</text>
3. </template>
4. <script>
5. export default {
6. name: 'test',
7. methods: {
8. doThis(e){
9. api.alert({
10. msg:e.currentTarget.dataset.name
11. });
12. }
13. }
14. }
15. </script>
事件处理方法也可以使用模板的方式，如：
Click me!
view 是通用容器组件，内部可以放置任意组件。默认布局方式为flex布局。
• 注意不要直接在 view 内添加文本，添加文本使用 text 组件。
text 组件用于显示文本信息。
原文地址：https://www.**.****.**/lygcorey/p/15693937.html
