前端如何低门槛开发iOS、Android、小程序多端应用
现如今跨平台开发技术已不是什么新鲜话题了,在市面上也有一些开源的框架可供选择,然而技术成熟、产品服务健全的平台并不多,其中也不乏推陈出新的框架值得关注。
比如最近使用的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 监听:
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 组件用于显示文本信息。
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网站上提供了很多模块、实例和工具源码的下载,感兴趣的前端小伙伴不妨去试试。
前端如何低门槛开发iOS、Android、小程序多端应用的更多相关文章
- iOS学小程序从0到发布(适合iOS开发看)
Emmmm,最近一波失业潮.富某康.某团.摩某.京某.知某.某浪.58 某大面积裁员,那么在这个千钧一发之际,单纯iOS开发也着实不好过,回过头看一下,裁掉的都是单一选手,为了节约成本公司留下的都是身 ...
- 从前端界面开发谈微信小程序体验
本文由云+社区发表 作者介绍:练小习,2011年加入搜狐,负责搜狐相册的产品策划与前端开发.2015年后加入腾讯 ISUX (社交用户体验设计部),目前主要负责腾讯云的UI开发工作,专注于人机交互,有 ...
- 全栈开发工程师微信小程序-中(中)
全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...
- android小程序-电子钢琴-多点触控
我在第一篇博客<android小程序-电子钢琴-滑动连续响应>中实现了一个简单地7键钢琴,这几天把它又完善了一下,增加了多点触控,按键也增加了一个低音区和一个高音区,使得又可以多弹一点简单 ...
- 咏南中间件支持DELPHI低版本开发的两层程序平稳升级到三层
提供DELPHI中间件及中间件集群,有意请联系. N年前,我们用DELPHI低版本开发的两层程序(比如工厂ERP系统),现在仍然在企业广泛地得到使用,但老系统有些跟不上企业的发展需要了.主要表现在:虽 ...
- 开发一个微信小程序教程
一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序 ...
- 开发一个微信小程序项目教程
一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...
- android小程序之幸运菜谱
android小程序之幸运菜谱 前言:刚刚结束短短5天的android公开课程,收获不少,写下来记录一下吧!(因为学校校企公开课的缘故才偶然接触的android,所以只学了这几天,不喜勿喷) 一开始得 ...
- 如何快速地开发一个微信小程序
如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...
随机推荐
- 【C/C++】函数的分文件编写
创建同名的头文件(.h)和cpp文件. 在头文件里写函数声明,在cpp文件中写函数定义. 在cpp文件中写#include "xx.h" //自定义头文件名 框架(include ...
- 利用Windbg分析Magicodes.IE一次错误编写导致内存剧增
由于这近一年时间一直忙于写书和工作,一直没有水文,但是近期有几位朋友使用我们的Magicodes.IE反馈在导出过程中内存暴涨...好吧,不管怎样,不能苦了我们朋友,接下来我们通过windbg来看一下 ...
- Mongodb单点部署
目录 一.依赖和环境 二.部署 三.启动和测试 一.依赖和环境 centos7.2,4核cpu, 8G内存 100G硬盘 版本:3.4.7社区版本 端口:27017 数据目录:/usr/local/m ...
- Mac配置apache,mysql
===========Apache=============================== 1. 启动关闭Apache MAC系统已经预装了apache,启动.关闭.查看版本等命令如下: 启动a ...
- ciscn_2019_es_7
这是我第一次见到srop的用法的题目,于是在此记录方便以后的复习 拿到程序例行检查 将程序放入ida中 可以看到栈的大小是0x10,却可以显示出0x30的内容,所以我们可以通过这个溢出泄露出/bin/ ...
- [BUUCTF]REVERSE——crackMe
crackMe 附件 步骤: 例行检查,32位程序,无壳 32位ida载入,已知用户名welcomebeijing,解密码,直接看main函数 可以看到程序是个死循环,只有满足sub_404830函数 ...
- 一道栈溢出babystack
我太天真了,师傅说让我做做这个平台的题,我就注册了个号,信心满满的打开了change,找到了pwn,一看第一道题是babystack,我想着,嗯,十分钟搞定他!直到我下载了题目,题目给了libc,然后 ...
- 在对话框中设置前置任务(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 在[任务信息]中的[前置任务]选项卡中设置,这是最古板的法子. 至于[任务信息]这个对话框从哪里去找,这--这么久了,不会 ...
- IDEA 2021.2.1 破解版下载_激活安装图文教程(永久激活,亲测有效)
1.IntelliJ IDEA 2021 链接:https://pan.baidu.com/s/1Pwz3GrrkJdDZzg-wg5UjMw 提取码:56o6 无限重置 30 天试用期补丁 链接:h ...
- mysql 连接数过多内存增长过快
mysql连接允许长连接和短链接,但是本身建立连接会有很大开销所以一般连接mysql会使用长连接.但是全部是使用长连接后,可能会出现mysql有时占用内存涨的特别快,这是因为mysql在执行过程中临时 ...