低门槛开发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 相关文章推荐
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
基于angular实现树形二级表格
ajax请求前端跨域问题原因及解决方案
浅谈TypeScript 索引签名的理解
JavaScript 反射学习技巧
Oct 16 #Javascript
JS的深浅复制详细
Oct 16 #Javascript
JS 基本概念详细介绍
Oct 16 #Javascript
AJAX实现指定部分页面刷新效果
You might like
基于文本的访客签到簿
2006/10/09 PHP
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php 使用array函数实现分页
2015/02/13 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
jquery validate 自定义验证方法介绍 日期验证
2014/02/27 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
elementui实现预览图片组件二次封装
2020/12/29 Javascript
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Python实现简单的四则运算计算器
2016/11/02 Python
python导入时小括号大作用
2017/01/10 Python
Python对象与引用的介绍
2019/01/24 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
python如何建立全零数组
2020/07/19 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
架构师岗位职责
2013/11/18 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
群众路线专项整治方案
2014/10/27 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
碧霞祠导游词
2015/02/09 职场文书
预备党员介绍人意见
2015/06/01 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书