共计 3679 个字符，预计需要花费 10 分钟才能阅读完成。
传统混合挪动 App 开发模式，通常会应用 WebView 作为桥接层，但随着 iOS 和 Android 利用商店审核政策日趋严格，有时会被谬误断定为简略网页打包成 App，上架容易受到回绝。
既然可能存在危险，那咱们能够不应用 WebView，通过其余形式来进行渲染，比方应用 APICloud 推出的 JavaScript 跨平台开发框架 avm.js，其降级后的 App 引擎不依赖 WebView，提供百分百的原生渲染，能够帮忙开发者晋升渲染的效率和成果，同时还反对组件化开发，提供牢靠的后端反对。此外 avm.js 与 Vue 语法相似，并兼容 React JSX，APICloud 官网还提供了大量的案例和教程，学习成本低，非常适合开发者疾速应用。
渲染效率晋升显著
下方左图是用 avm.js 的 Grid-View 组件实现的列表，右图是应用 WebView 渲染 HTML 页面实现的列表，可通过 GPU 出现模式分析曲线看到蓝色，绿色平均线升高很多，示意测量和绘制视图列表所须要的工夫大幅缩小。
Grid-View 组件代码举例：
<template>
<grid-view id="gridView" class="main" column-count="3" aspect-ratio="1" inset="10" scroll-y enable-back-to-top onscrolltolower={this.onscrolltolower}>
<cell class="cell" onclick={this.itemClick}>
<text class="title">{item.title}</text>
</cell>
<list-footer class="footer">
<text> 加载中...</text>
</list-footer>
</grid-view></template><style>
.main {
width: 100%;
height: 100%;
}
.cell {
justify-content: center;
align-items: center;
background-color: #5cdfdc;
}
.title {
font-weight: bold;
color: #000;
}
.footer {
justify-content: center;
align-items: center;
height: 44px;
}</style><script>
export default {
name: 'test',
methods:{apiready() {this.initData(false);
},
initData(loadMore) {
var that = this;
var skip = that.dataList?that.dataList.length:0;
var dataList = [];
for (var i=0;i<99;i++) {dataList[i] = {title: '我的项目' + (i + skip)
};
// 瀑布流成果
// dataList[i].itemHeight = Math.floor(200 + Math.random()*50);
}
var gridView = document.getElementById('gridView');
if (loadMore) {that.dataList = that.dataList.concat(dataList);
gridView.insert({data: dataList});
} else {
that.dataList = dataList;
gridView.load({data: dataList});
}
},
onscrolltolower() {this.initData(true);
},
itemClick(e) {
api.alert({msg: '点击了项：' + e.currentTarget.index});
}
}
}</script>
组件化开发
avm.js 组件丰盛，可自定义开发组件，目前提供零碎级根底组件 31 个，ACT 多端框架组件库和开发者奉献多端组件 120 多个。对于开发团队，随着我的项目的不断深入、迭代、优化，累积积淀本人的组件库对于满足麻利的我的项目交付要求和疾速的迭代保护要求意义重大。
学习成本低，上手容易
avm.js 框架语法和 Vue 语法相似，并兼容 React JSX。如果是 Vue、React 的用户的话，将更易上手 avm.js，简直不须要学习老本。avm.js 具备数据驱动个性，编写直观简洁的代码，能够将数据源绑定到利用用户界面，升高逻辑复杂性和开发难度，数据变更将主动实时反馈到用户界面。
- 应用 STML 定义一个组件 / 页面
STML 组件兼容 Vue 单文件组件 (SFC) 标准，应用语义化的 HTML 模板及对象化 JS 格调定义组件或页面。STML 最终被编译为 JS 组件 / 页面，渲染到不同终端。
<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>
- 应用 JS 定义一个组件 / 页面
JS 组件 / 页面合乎 Web Components 标准，应用 define 函数进行组件定义，应用 render 函数渲染到终端。
avm.define('api-test', class extends Component {
data = {title: 'Hello APP'}
css(){
return `.header {height: 45}`
}
render() {
return (
<view class='header'>
<text>{this.data.title}</text>
</view>
);
}});
案例及视频教程
基于晋升开发效率的这一目标，avm.js 官网页面提供了 App 与小程序的实战开发培训教程，大量各行业各场景的模板和源码收费应用，在保障 App 体验成果的同时简化开发流程，晋升开发效率。
点餐模版前后端源码教程
《点餐》我的项目是一个餐饮商户单商家堂食下单利用。次要性能包含浏览商家主页信息、查看举荐菜品、下单商品、取餐等号等性能。能够实用于小吃快餐餐饮商户的堂食点单治理，也能够进行略微二开成为外卖、店铺或者是虚构服务等电商小利用。
教育培训模板
本我的项目的一个教育培训服务 APP。提供在线浏览机构信息、名师风采和课程预约订购等性能。
模板蕴含前后端，其中前端代码应用 avm.js 多端技术开发，可同时编译为 Android & iOS App 以及微信小程序；后端应用 APICloud 数据云 3.0 云函数自定义接口。
服饰商城模板
本模板为在线服饰商城类型，次要性能包含商品展现、商品搜寻、购物车、订单治理等。
模板蕴含前后端，其中前端代码应用 avm.js 多端技术开发，可同时编译为 Android & iOS App 以及微信小程序；后端应用 APICloud 数据云 3.0 云函数自定义接口。
拼团商城模板阐明
本模板为拼团商城类型，次要性能包含商品分类、商品详情、商品搜寻、拼团、订单治理等。
模板蕴含前后端，其中前端代码应用 avm.js 多端技术开发，可同时编译为 Android & iOS App 以及微信小程序；后端应用 APICloud 数据云 3.0 云函数自定义接口。
后端开发反对
APICloud 还为 avm.js 的使用者提供了服务端开发运维平台，数据云 3.0 提供了从后端开发、接口联调到上线经营保护等一整套计划。
开发者无需思考数据库和服务器等基础设施，无需关怀服务器测试环境的搭建，数据的备份及服务扩容等与业务无关的工作，只需关怀逻辑自身。通过云引擎，云数据库，云函数，内置模型、等功能模块不便用户疾速实现罕用的后端性能。通过模型库复用疾速把罕用第三方性能引入到本人的我的项目中，节俭开发工夫。同时内置了治理后盾、API 调试等性能，在减少了本人编写后端服务灵活性的同时不便了前后端开发者的联调和测试。
数据云 3.0 能够实现很多后端常见的场景，例如:
- 一个小程序能够在 APICloud 上存储数据并通过自定义接口实现本人的业务逻辑。
- 一个挪动 app 利用能够间接基于云平台提供的能力实现后端工作。
- 一个网站能够展现来自 APICloud 上的数据，网站的前端也能够放到 APICloud 平台。
- 疾速开发出我的项目最小化可行产品来验证市场。
- 企业外部数字化业务的疾速落地。
论坛反对
APICloud 官方论坛设有 AVM 讨论区，开发过程中如果有问题能够到论坛搜寻，或发帖寻找有教训的开发者进行探讨，还能够及时获取官网技术的反对。
总体而言，应用 avm.js 一个技术栈即可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App，且多端渲染成果对立。avm.js 提供了更趋近于原生的编程体验，通过简洁的模型来拆散利用的用户界面、业务逻辑和数据模型，适宜高度定制的利用开发，感兴趣的前端小伙伴能够来学习尝试下~
