现如今跨平台开发技术已不是什么新鲜话题了，在市面上也有一些开源的框架可供选择，然而技术成熟、产品服务健全的平台并不多，其中也不乏推陈出新的框架值得关注。比如最近使用的AVM，由APICloud迭代推出的多端开发框架，基于JavaScript，兼容多语法，如果是Vue、React的用户，可直接上手，没什么学习成本，具备虚拟DOM，可一次编写多端渲染；主要是APICloud上线已有7年，相对已经成熟，所以我把自己的一些认知和实践结合AVM官方文档的内容做了一下整理，希望能对需要使用跨平台开发技术的开发者有所帮助。为什么学习AVM框架？结合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 监听：<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 对象等。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> 事件处理方法也可以使用模板的方式，如：<text onclick={this.doThis}>Click me!</text>view 是通用容器组件，内部可以放置任意组件。默认布局方式为flex布局。? 注意不要直接在 view 内添加文本，添加文本使用 text 组件。text 组件用于显示文本信息。1. <template> 2. <scroll-view class="main" scroll-y> 3. <text class="text">普通文本</text> 4. <text class="text bold">粗体文本</text> 5. <text class="text italic">斜体文本</text> 6. <text class="text shadow">Text-shadow 效果</text> 7. </scroll-view> 8. </template> 9. <style> 10. .main { 11. width: 100%; 12. height: 100%; 13. } 14. .text { 15. height: 30px; 16. font-size: 18px; 17. } 18. .bold { 19. font-weight:bold; 20. } 21. .italic { 22. font-style:italic; 23. } 24. .shadow { 25. text-shadow:2px 2px #f00; 26. } 27. </style> 28. <script> 29. export default { 30. name: 'test' 31. } 32. </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. <template> 2. <view class='header'> 3. <text>{this.data.title}</text> 4. </view> 5. </template> 6. <script> 7. export default { 8. name: 'api-test', 9. data(){ 10. return { 11. title: 'Hello APP' 12. } 13. } 14. } 15. </script> 16. <style scoped> 17. .header{ 18. height: 45px; 19. } 20. </style> 引用组件：在其他页面或组件引用。1. // app-index.stml: 2. 3. <template> 4. <view class="app"> 5. <img src="./assets/logo.png" /> 6. <api-test></api-test> 7. </view> 8. </template> 9. <script> 10. import './components/api-test.stml' 11. 12. export default { 13. name: 'app-index', 14. data: function () { 15. return { 16. title: 'Hello APP' 17. } 18. } 19. } 20. </script> 21. <style> 22. .app { 23. text-align: center; 24. margin-top: 60px; 25. } 26. </style> 组件生命周期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网站上提供了很多模块、实例和工具源码的下载，感兴趣的前端小伙伴不妨去试试。
