avm.js跨端框架全介绍

avm.js 是APICloud 新推出的跨端JavaScript开发框架，可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App，且多端渲染效果统一。

渲染效率提升巨大

全新的 App 引擎 3.0 不依赖 webView，提供百分百的原生渲染，保障 App 性能和体验与原生 App 一致。

下面第一张图是用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>

组件化开发

组件丰富，可自定义开发组件。目前提供系统级基础组件31个，act多端框架组件库和开发者贡献多端组件120多个。

对于开发团队，随着项目的不断深入、迭代、优化，累积沉淀自己的组件库对于满足敏捷的项目交付要求和快速的迭代维护要求意义重大。

对前端开发者而言，学习成本极低

Avm.js 框架语法和 Vue语法类似，并兼容 React JSX。如果您是Vue、React的用户，将更易上手AVM，几乎不需要学习成本。具备数据驱动特性，编写直观简洁的代码，轻松将数据源绑定到您的应用用户界面，降低逻辑复杂性和开发难度，数据变更将自动实时反馈到用户界面。

1. 使用stm定义一个组件 / 页面

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>

1. 使用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>
        );
    }
});

数据云3.0，便利后端开发

数据云3.0是一个全新的服务端开发运维平台，提供从后端开发、接口联调到上线运营维护等一整套方案。开发者无需考虑数据库和服务器等基础设施，无需关心服务器测试环境的搭建，数据的备份及服务扩容等与业务无关的工作，只需关心逻辑本身。通过云引擎，云数据库，云函数，内置模型、等功能模块方便用户快速实现常用的后端功能。通过模型库复用快速把常用第三方功能引入到自己的项目中，极大缩短了开发时间。同时内置了管理后台、API调试等功能，在增加了用户自己编写后端服务的灵活性的同时方便了前后端开发者的联调和测试。在安全层面，我们也提供了接口层相应的安全校验机制。为了在新功能的迭代过程中不影响线上用户，我们提供了开发环境和测试环境，用户可以放心的把测试过的功能提供出去。针对已经开发好的功能模块，新版数据云可以直接把模块的定义及函数集成到项目中，方便开发者的使用。 新版的数据云可以实现很多后端常见的场景，例如:

1. 一个小程序可以在APICloud上存储数据并通过自定义接口实现自己的业务逻辑
2. 一个移动app应用可以直接基于我们的云平台提供的能力完成后端工作
3. 一个网站可以展示来自APICloud上的数据，网站的前端也可以放到APICloud平台
4. 快速开发出项目最小化可行产品来验证市场
5. 企业内部数字化业务的快速落地

丰富的案例及视频教程，不愁学不会

APICloud 3.0—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云函数自定义接口。

社区活跃，支持及时，遇到问题不怕没处问

专设有AVM讨论区，及QQ群（339762594），有问题和有经验的开发者及时讨论，开发不孤单，或及时获取官方技术的支持。