低门槛开发iOS、Android、小程序应用的前端框架详解


Posted in Javascript onOctober 16, 2021

现如今跨平台开发技术已不是什么新鲜话题了,在市面上也有一些开源的框架可供选择,然而技术成熟、产品服务健全的平台并不多,其中也不乏推陈出新的框架值得关注。

比如最近使用的AVM,由APICloud迭代推出的多端开发框架,基于JavaScript,兼容多语法,如果是Vue、React的用户,可直接上手,没什么学习成本,具备虚拟DOM,可一次编写多端渲染;主要是APICloud上线已有7年,相对已经成熟,所以我把自己的一些认知和实践结合AVM官方文档的内容做了一下整理,希望能对需要使用跨平台开发技术的开发者有所帮助。

为什么学习AVM框架?

结合AVM官网的介绍和我自己的一些实践经验,我总结了一系列AVM的特性,我想这些内容足以让你主动去学习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』

生命周期更多详情 参考官方文档

总体而言,APICloud这款开发框架,比较趋近于原生的编程体验,通过简洁的模式来分离应用的用户界面、业务逻辑和数据模型,适合高度定制化的项目,另外APICloud网站上提供了很多模块、实例和工具源码的下载,感兴趣的前端小伙伴不妨点击这里尝试下吧。

到此这篇关于低门槛开发iOS、Android、小程序应用的前端框架详解的文章就介绍到这了,更多相关低门槛开发前端框架内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
基于angular实现树形二级表格
ajax请求前端跨域问题原因及解决方案
浅谈TypeScript 索引签名的理解
JavaScript 反射学习技巧
Oct 16 #Javascript
JS的深浅复制详细
Oct 16 #Javascript
JS 基本概念详细介绍
Oct 16 #Javascript
AJAX实现指定部分页面刷新效果
You might like
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
python操作日期和时间的方法
2014/03/11 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
python 检查文件mime类型的方法
2018/12/08 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
python超时重新请求解决方案
2019/10/21 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
Django返回HTML文件的实现方法
2020/09/17 Python
python中类与对象之间的关系详解
2020/12/16 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
大学生自我鉴定书
2014/03/24 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
如何利用python实现列表嵌套字典取值
2022/06/10 Python