前端如何低门槛开发 iOS、Android、小程序多端应用

2021 年 11 月 22 日
本文字数：3555 字
阅读完需：约 12 分钟

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

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

为什么学习 AVM 框架？

结合 AVM 官网的介绍和我自己的一些实践经验，我总结了一系列 AVM 的特性，我想这些内容足以让你主动去学习 AVM 框架了。

一套代码可编译为对应 Android 、iOS 、微信小程序、iOS 轻 App、H5 端的安装包或代码包。
兼容 APICloud2.0 技术栈，这意味着平台上上千款 Android iOS 原生模块可供使用。或者在老项目里部分引入 3.0 的技术，对 APP 局部进行优化。
原生引擎渲染。如果使用 avm.js 进行开发，App 将使用无 webView 的原生引擎 3.0 进行渲染，所有组件及视图与 Android & iOS 系统原生组件和视图百分百对齐。
类 Vue 语法和兼容 React JSX。有 Vue 或 React 基础的用户可以很快上手。
组件化开发，提升代码复用率。

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>

默认组件举几个例子说明，更多组件可点击登录APICloud官网查看官方文档。

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 定义一个组件/页面，可以点击登录APICloud参考官方文档。

组件生命周期

AVM.js 组件规范符合 Web Components 规范，生命周期遵循标准 Web Components 组件的生命周期。同时兼容 Vue 组件的生命周期。

所有支持的生命周期事件

『每个页面都应实现 apiready，并在 apiready 后处理业务逻辑；installed 属于组件级别生命周期，在页面加载组件过程中即被触发，其触发时机早于 apiready』

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

发布于: 2 小时前阅读数: 3

APICloud

关注

一次编码多端运行，移动应用低代码开发平台 2020.12.22 加入

APICloud多端技术遵循标准 Web Components组件化思想，兼容Vue 、React语法特性，一次编码同时发布为Android 、iOS 、小程序、Html5（SPA）多端应用。

发布

暂无评论

创作场景

前端如何低门槛开发 iOS、Android、小程序多端应用

APICloud

评论