低门槛开发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插件开发方法(附完整实例及下载)
Apr 01 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
基于angular实现树形二级表格
ajax请求前端跨域问题原因及解决方案
浅谈TypeScript 索引签名的理解
JavaScript 反射学习技巧
Oct 16 #Javascript
JS的深浅复制详细
Oct 16 #Javascript
JS 基本概念详细介绍
Oct 16 #Javascript
AJAX实现指定部分页面刷新效果
You might like
GD输出汉字的函数的分析
2006/10/09 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
如何使用php实现评委评分器
2015/07/31 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
原生JS实现的双色球功能示例
2018/02/02 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中itertools模块用法详解
2014/09/25 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python partial函数原理及用法解析
2019/12/11 Python
基于Python实现粒子滤波效果
2020/12/01 Python
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
会计电算化专业个人的自我评价
2013/11/24 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
欢迎标语大全
2014/06/21 职场文书
小学教师岗位职责
2015/04/02 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
Java 死锁解决方案
2022/05/11 Java/Android
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS