前端避坑指南丨辛辛苦苦开发的 APP 竟然被判定为简单网页打包？

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

传统混合移动 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 云函数自定义接口。

服饰商城模板

本模板为在线服饰商城类型，主要功能包括商品展示、商品搜索、购物车、订单管理等。

拼团商城模板说明

本模板为拼团商城类型，主要功能包括商品分类、商品详情、商品搜索、拼团、订单管理等。

后端开发支持

APICloud 还为 avm.js 的使用者提供了服务端开发运维平台，数据云 3.0 提供了从后端开发、接口联调到上线运营维护等一整套方案。

开发者无需考虑数据库和服务器等基础设施，无需关心服务器测试环境的搭建，数据的备份及服务扩容等与业务无关的工作，只需关心逻辑本身。通过云引擎，云数据库，云函数，内置模型、等功能模块方便用户快速实现常用的后端功能。通过模型库复用快速把常用第三方功能引入到自己的项目中，节省开发时间。同时内置了管理后台、API 调试等功能，在增加了自己编写后端服务灵活性的同时方便了前后端开发者的联调和测试。

数据云 3.0 可以实现很多后端常见的场景，例如:

· 一个小程序可以在 APICloud 上存储数据并通过自定义接口实现自己的业务逻辑。

· 一个移动 app 应用可以直接基于云平台提供的能力完成后端工作。

· 一个网站可以展示来自 APICloud 上的数据，网站的前端也可以放到 APICloud 平台。

· 快速开发出项目最小化可行产品来验证市场。

· 企业内部数字化业务的快速落地。

论坛支持

APICloud 官方论坛设有 avm 讨论区，开发过程中如果有问题可以到论坛搜索，或发帖寻找有经验的开发者进行讨论，还可以及时获取官方技术的支持。

总体而言，使用 avm.js 一个技术栈即可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App，且多端渲染效果统一。avm.js 提供了更趋近于原生的编程体验，通过简洁的模型来分离应用的用户界面、业务逻辑和数据模型，适合高度定制的应用开发，感兴趣的前端小伙伴可以来学习尝试下~

发布于: 2021 年 12 月 03 日阅读数: 9

原文链接:【http://xie.infoq.cn/article/08bb7c2342f3370356b824489】。文章转载请联系作者。