如何在前端低门槛的开发iOS、Android、小程序的多终端应用

如今，跨平台开发技术已经不是什么新鲜话题了。市面上也有一些开源框架可供选择，但技术成熟、产品服务完善的平台并不多，也有值得关注的新框架。比如最近使用的AVM，是APICloud迭代推出的多端开发框架，基于JavaScript，兼容多种语法。如果你是Vue或者React的用户，可以直接上手，不需要学习成本。具有虚拟DOM，可同时编写多端渲染；主要是APICloud已经上线7年，比较成熟，所以结合自己的一些认知和实践结合AVM官方文档的内容进行了梳理，希望对需要使用跨平台开发技术的开发者有所帮助。为什么要学习AVM框架？结合AVM官网的介绍和我自己的一些实践经验，总结了一系列AVM的特点，我觉得已经足够你主动去学习AVM框架了。一套代码可以编译成Android、iOS、微信小程序、iOS轻应用、H5端对应的安装包或代码包。兼容APICloud2.0技术栈，平台支持数以千计的Android和iOS原生模块。或者在老项目中部分引入3.0技术，对APP进行部分优化。本机引擎渲染。如果使用avm.js开发，应用将使用原生引擎3.0渲染，不带webView，所有组件和视图100%对齐Android&iOS系统原生组件和视图。类Vue语法和ReactJSX兼容。有Vue或React基础的用户可以快速上手。基于组件的开发改进了代码重用。AVM中的页面介绍：AVM中的页面称为stml页面，一个典型的stml文件代码如下：1.14.25.数据绑定从上面的代码段可以看出，数据绑定的方式是{variable}，支持双花括号和单花括号包裹变量或表达式，可以用来绑定text有两种方式绑定内容或者元素属性事件来监听事件。使用on进行监控：点我！使用v-on命令和缩写进行监控：点我！点我！事件处理方法事件处理方法需要在methods中定义。该方法默认包含一个参数，可以通过该参数获取detail、currentTarget对象等。1.4.事件处理方法也可以使用模板方法，如：Clickme!视图是一个通用的容器组件，任何组件都可以放在里面。默认的布局方式是flex布局。?注意不要直接在视图中添加文本，使用文本组件添加文本。文本组件用于显示文本信息。1.9.28.7.exportdefault{8.name:'api-test',9.data(){10.return{11.title:'HelloAPP'12.}13.}14.}15.16.17..header{18.height:45px;19.}20.引用组件：在其他页面或组件中引用。1.//app-index.stml:2.3.9.21.组件生命周期avm.js组件规范符合WebComponents规范，生命周期遵循标准的WebComponents生命周期。同时兼容Vue组件的生命周期。所有支持的生命周期事件生命周期函数名称触发计时apiready页面运行环境已准备就绪并呈现。当页面没有导入组件时，该事件相当于已安装。install组件先挂载到真实DOM（或App原生界面）后，再挂载到真实DOM（或App原生界面）。在页面层面，这个事件相当于apiready。render组件开始渲染uninstall组件从真实DOM（或App原生界面）中移除beforeupdatecomponentupdatedbeforetheupdatedcomponentisupdatedbeforeRendercomponentstartsrendering"每个页面都应该实现apiready并在之后处理业务逻辑apiready；installed属于组件级生命周期，在页面加载组件时触发，其触发时间早于apiready。”总的来说，APICloud这种开发框架更接近原生的编程体验，通过简单的模型分离应用的用户界面、业务逻辑、数据模型，适合高度定制化的项目。另外，APICloud官网提供了很多模块、示例和工具源码的下载，有兴趣的前端小伙伴不妨试试。