低门槛开发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 相关文章推荐
js 数据类型转换总结笔记
Jan 17 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
基于angular实现树形二级表格
ajax请求前端跨域问题原因及解决方案
浅谈TypeScript 索引签名的理解
JavaScript 反射学习技巧
Oct 16 #Javascript
JS的深浅复制详细
Oct 16 #Javascript
JS 基本概念详细介绍
Oct 16 #Javascript
AJAX实现指定部分页面刷新效果
You might like
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
python进程与线程小结实例分析
2018/11/11 PHP
js Array对象的扩展函数代码
2013/04/24 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
Python跳出循环语句continue与break的区别
2014/08/25 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
会计主管岗位职责
2014/01/03 职场文书
党员公开承诺书
2014/03/25 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
药店营业员岗位职责
2015/04/14 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS