传统混合挪动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提供了更趋近于原生的编程体验，通过简洁的模型来拆散利用的用户界面、业务逻辑和数据模型，适宜高度定制的利用开发，感兴趣的前端小伙伴能够来学习尝试下~