avm.js 怎么样?
AVM是APICloud推出的跨端JavaScript 框架。
AVM的几个特点:
1. 一套代码可编译为对应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 文件代码如下:
<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 组件用于显示文本信息。
<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:
<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>
引用组件:
在其他页面或组件引用。
// 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』
生命周期更多详情 参考官方文档
avm.js 怎么样?相关推荐
- android avm灰色,APICloud AVM多端开发案例深度解析(上)--点餐app开发
AVM多端开发是APICloud定义的一套新的代码编写标准(DSL):基于标准Web Components组件化思想,兼容Vue / React语法特性,通过一次编码,分别编译为Android和iOS ...
- APICloud AVM多端开发 | 《外卖app开发》项目源码深度解析(上)
为了让开发者更加快速的学习和了解APICloud多端开发技术,APICloud平台特别推出一款多端源码-<餐饮点餐>,可以体验一套代码编译Android和iOS app+小程序. AVM多 ...
- android 电商app组件化,APICloud AVM多端开发案例深度解析(一)--生鲜电商app开发
AVM多端开发是APICloud定义的一套新的代码编写标准(DSL):基于标准Web Components组件化思想,兼容Vue / React语法特性,通过一次编码,分别编译为Android和iOS ...
- APICloud AVM框架 开发视频会议APP
APP开发采用的APICloud平台的AVM 多端应用开发框架 使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App.小程序和 iOS 轻 App,且多端渲染效果 ...
- APICloud AVM框架 封装日历组件
AVM(Application-View-Model)前端组件化开发模式基于标准Web Components组件化思想,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具,完 ...
- APICloud AVM框架 封装SKU(商品规格选择)组件
AVM(Application-View-Model)前端组件化开发模式基于标准Web Components组件化思想,提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具,完 ...
- APICloud可视化开发新手图文教程
本教程主要面向初次使用APICloud Studio3 中可视化工具的新手开发者,旨在通过简单清晰的图文描述,让新手开发者快速掌握可视化工具的使用. APICloud Studio3 可视化工具秉承低 ...
- 小白 0-1 学习 app 开发,从配置到 hello world
第一步,注册 选择开发工具 有一些教程上会说先创建应用,再选择工具,是使用的控制台创建的 APICloud Studio3 APP开发工具-专业多端开发工具 APICloud Studio 3 工具的 ...
- APICloud 原生模块、H5模块、多端组件使用教程
使用APICloud平台,可以使用前端技术快速开发iOS.Android App.小程序.Web等多端应用.在开发过程中,调用模块可以极大的提升开发效率.本文分为三个部分,告诉大家如何使用APIClo ...
最新文章
- ACL 2021 最佳论文:最优运输理论开启词表学习新纪元
- Spy++的使用方法及下载
- C++(四)——类和对象(下)
- async js 返回值_JS异步编程 | Async / Await / Generator 实现原理解析
- 关于 Cypress 同界面元素交互的讨论
- 使用npm安装TypeScript
- foreach判断最后一个_ArrayList集合为什么不能使用foreach增删改?
- su 切换,提示:“密码不正确”;
- 安兔兔发布9月份Android性能榜:855霸榜,华为竟垫底
- 相对于其他框架的离子应用开发:它被炒作了吗?
- zedgraph显示最小刻度_关于ZedGraph几个难点
- matlab 分块 矩阵 对角 合并
- 【唐老狮】Unity和UE4两大游戏引擎,你该如何选择?
- python 分析泰坦尼克号生还率_如何用Python分析泰坦尼克号生还率?
- 测试工程师进阶之测试用例发散思维(二)
- AWE 2017盛大开幕,跨界生态圈刷新未来
- android 监听 短信,Android短信验证码监听解决onChange多次调用的方法
- 量子计算机 国外大学,全球首款纯硅量子计算机芯片在新南威尔士大学诞生
- android 打开和关闭输入法
- 苹果home兼容问题修改--苹果fixed定位被遮挡-或者距离太近
热门文章
- php安卓直播抓取,php直播源码,安卓调用闪光灯
- apache负载均衡 健康检查_Apache服务器配置负载均衡的方法 - Apache - 数安时代(GDCA)SSL证书官网...
- python元组有什么用_python元组是什么意思
- 纯css3绿色卡通树图形js特效
- 康耐视visionpro9.0打开工具显示字体异常解决办法
- 利用深度学习实现手绘数据可视化的生成
- 产品周报第25期|博文分享新增「分享人」标识,「读者分享」可记录分享人带来的阅读量明细……
- 【正点原子FPGA连载】 第八章 LED灯闪烁实验摘自【正点原子】DFZU2EG/4EV MPSoC 之FPGA开发指南V1.0
- 配音软件哪个好,分享三款,简单操作还是真人发声
- resolving Maven dependencies