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

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

比如最近使用的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、小程序应用的前端框架详解的文章就介绍到这了,更多相关低门槛开发前端框架内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-10-10

12个常用前端UI框架集合汇总

1.bootstrap Bootstrap 是Twitter推出的一个用于前端开发的,一个用于 HTML.CSS 和 JS 开发的开源工具包,是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目. 官网:https://v4.bootcss.com/ 文档:https://v4.bootcss.com/docs/getting-started/introduction/ 2.Layui layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 H

一文快速详解前端框架 Vue 最强大的功能

组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $lis

vue前端框架—Mint UI详解(更适用于移动端)

一.mintUI简介 mint是一个基于vue的前端UI框架,而它的样式比较类似于手机的样式,可以说是一个基于vue打包app的UI框架,使用mint框架可以给使用vue打包的app的用户更好的交互体验.mint已支持vue2.0. 二.安装和引入mintUI     在安装之前首先要对vue.js有所了解,有一个建立好的vue的项目以及安装好的node.js. 执行命令npm i mint-ui -S,出现以下界面代表安装成功. 引入muitUI: 在main.js中加入 import Min

BootStrop前端框架入门教程详解

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. bootstrap 的学习非常简单,并且它所提供的样式又非常精美.只要稍微简单的学习就可以制作出漂亮的页面. bootstrap中文网:http://v3.bootcss.com/ bootstrap提供了三种类型的下载: -----------------------------------------------

BootStrap前端框架使用方法详解

1.概念: Bootstrap,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的,它简洁灵活,使得 Web 开发更加快捷. 好处: 1.定义了很多的css样式和js插件.我们开发人员直接可以使用这些样式和插件得到丰富的页面效果. 2.响应式布局. 同一套页面可以兼容不同分辨率的设备. 2.使用步骤: 1.下载Bootstrap,官网地址:https://v3.bootcss.com 2.在项目中将这三个文件夹复制 3.创建html页面,引入必要的资

通过GASP让vue实现动态效果实例代码详解

单页应用及支持它们的前端框架提供了一个很好的机会,可以为程序设计提供令人惊叹的交互层,本文,我们将了解 vue.js 及如何集成 GASP 动画库来添加令人惊叹的动画效果. Vue.js 是一个功能强大且易掌握的 JS 框架,在 Vue CLI 的帮助下,我们能够快速构建具有所有最新 Webpack 功能的应用程序,而无需花费时间来配置 webpack,只需安装 Vue CLI,在重大上输入:create <project-name>,您就可以发车了. GASP是一个JavaScript动画库

基于mpvue搭建微信小程序项目框架的教程详解

简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序开发 前言: 本文讲述如何搭建完整的小程序项目框架,因为是第一次使用,有不完善的地方请大佬指正. 搭建内容包括: 1.使用scss语法:依赖插件sass-loader .node-sass 2.像vue一样使用路由:依赖插件 mpvue-entry 和 mpvue-router-patch 3.使用

vue系列之动态路由详解【原创】

开题 最近用vue来构建了一个小项目,由于项目是以iframe的形式嵌套在别的项目中的,所以对于登录的验证就比较的麻烦,索性后端大佬们基于现在的问题提出了解决的方案,在看到他们的解决方案之前,我先画了一个比较标准的单系统的解决方案. 本文目录: 一: 设想 二: 讨论 三:实现 四:总结 一: 设想 简单解释下上图就是: 首先前端从cookie获取token,如果没有token就跳转到登录页面登录,登录验证之后生成token存在数据库中并返回给前端:前端将这个token保存下来,为了让在浏览器新

Android中XUtils3框架使用方法详解(一)

xUtils简介 xUtils 包含了很多实用的android工具. xUtils 支持大文件上传,更全面的http请求协议支持(10种谓词),拥有更加灵活的ORM,更多的事件注解支持且不受混淆影响... xUitls 最低兼容android 2.2 (api level 8) 今天给大家带来XUtils3的基本介绍,本文章的案例都是基于XUtils3的API语法进行的演示.相信大家对这个框架也都了解过, 下面简单介绍下XUtils3的一些基本知识. XUtils3一共有4大功能:注解模块,网络

Java Executor 框架的实例详解

Java Executor 框架的实例详解 大多数并发都是通过任务执行的方式来实现的. 一般有两种方式执行任务:串行和并行. class SingleThreadWebServer { public static void main(String[] args) throws Exception { ServerSocket socket = new ServerSocket(80); while(true) { Socket conn = socket.accept(); handleRequ

基于Java中最常用的集合类框架之HashMap(详解)

一.HashMap的概述 HashMap可以说是Java中最常用的集合类框架之一,是Java语言中非常典型的数据结构. HashMap是基于哈希表的Map接口实现的,此实现提供所有可选的映射操作.存储的是对的映射,允许多个null值和一个null键.但此类不保证映射的顺序,特别是它不保证该顺序恒久不变. 除了HashMap是非同步以及允许使用null外,HashMap 类与 Hashtable大致相同. 此实现假定哈希函数将元素适当地分布在各桶之间,可为基本操作(get 和 put)提供稳定的性

集合框架(Collections Framework)详解及代码示例

简介 集合和数组的区别: 数组存储基础数据类型,且每一个数组都只能存储一种数据类型的数据,空间不可变. 集合存储对象,一个集合中可以存储多种类型的对象.空间可变. 严格地说,集合是存储对象的引用,每个对象都称为集合的元素.根据存储时数据结构的不同,分为几类集合.但对象不管存储到什么类型的集合中,既然集合能存储任何类型的对象,这些对象在存储时都必须向上转型为Object类型,也就是说,集合中的元素都是Object类型的对象. 既然是集合,无论分为几类,它都有集合的共性,也就是说虽然存储时数据结构不