APICloud多端开发原理

在兼容和继承 APICloud 所有 API、模块、技术栈以及用户体验的基础上，APICloud 定义了一套新的代码编写标准(DSL)：基于标准 Web Components 组件化思想，兼容 Vue / React 语法特性，通过一次编码，分别编译为 APP、小程序代码，实现多端开发。

APP 代码使用 DeepEngine3.0 运行，全翻译式的运行原理提供完全原生的体验和性能。

APICloud 整个多端技术的工作原理

开发者在开发工具中编写代码并形成一个虚拟 dom，通过 webpack、rollup 等编译工具分别编译到 app、H5 以及小程序平台。在编译到 app 平台时整个运行基于 V8JavaScript 的引擎去运行，加上 avm.js 的共同作用去渲染或者执行开发者编写的代码，基于浏览器或者系统自带的 webview，代码借助于 avm.js 直接渲染到浏览器或者 webview 真实 dom 上。而对应小程序代码，则是直接生成小程序语法。

APICloud 在多端技术的 4 个核心能力：

跨平台引擎

历经近十年的发展，跨平台技术和生态如今趋于稳定，企业和开发者对跨平台技术已形成共识，并大规模的应用到各种业务场景中。

在此期间，跨平台技术分离出两个主要方向：

1. 混合方向：即 HTML5 + Native 混合，也就是我们通常说的混合开发：通过 HTML5 快速实现 APP 的 UI 布局、业务逻辑，在开发过程中涉及 HTML5 无法实现或者体验不好的功能，则借助Native模块来实现。
   该模式的 APP 引擎整体基于 Webview 架构，对前端开发者友好，背靠前端庞大的 JavaScript 生态，前端开发者无需学习新的技术即可开发 APP。该方向代表技术为 Cordova、AppMobi、Ionic 等。
2. 中间语言（DSL）编译方向：开发过程要求使用特定的语法编写 APP 代码，通过编译环境将代码编译为 Android / iOS 原生 APP。开发者无需学习 Android & iOS 原生技术以及 Java、Object-C、C/C++ 等复杂的开发语言即可完成 APP 开发。

该模式的 APP 引擎不依赖 Webview，而是借助Virtual Machine，比如 V8 / JSCore 引擎，通过 JS-Runtime 实现更为复杂的代码逻辑来满足交互处理、通信和状态管理，同时扩展和完善 JS / Native 的通信机制、封装完善的组件和系统能力等，实现完全原生的渲染。该方向既延续了前端开发体系，又最大限度保证了渲染的性能，代表技术为 React Native、Weex。

APICloud DeepEngine 3.0 同时支持以上两种技术模式，允许开发者在同一个APP中自由选择使用其中一种方式进行开发。

DeepEngine 使用全翻译式原理，将 Javascript 编译为 Native API，为 APP 提供完全原生的体验和性能。

跨端JS架构

在大前端技术领域，当我们遇到了需要解决重复性的问题时，通常会考虑设计一个 DSL（Domain-Specific Language）或者抽象出一个框架层，专门来解决这些类似的问题。使用 DSL 我们并不需要为特定终端编写多套代码，还可以利用宿主语言的抽象能力，确保各终端渲染效果的一致性以及对开发者友好。

常见的 DSL 有：React 支持的 JSX 语法、Vue 定义的 SFC 结构和 ​v-*​ 指令集、微信小程序的 WXML/WXS 语法等。这些 DSL 最终被编译为目标代码，直接发布于小程序平台，或者借助 JS-Runtime 运行于 APP 和 Web 浏览器。

APICloud 视图模型框架是基于标准 H5 子集设计的 DSL 中间语言编程框架，目前具备如下能力：

• Virtual DOM：通过虚拟 DOM，渲染到不同终端，充分尊重系统特性，为不同终端执行差异处理，实现高效渲染；
• 组件化：高可重用性、可组合性、可维护性的架构设计，隐藏了复杂的 DOM 结构和行为，让开发者专注于应用的功能和外观；
• 数据绑定：轻松将数据源绑定到应用用户界面，降低逻辑复杂性和开发难度；
• 状态管理和路由：有效分离用户界面和数据处理，实现项目的工程化管理；
• 类 Vue 语法和兼容 React JSX，兼具 Vue 的轻巧和 React 的灵活性。

APICloud DSL 最终可编译为标准 JS，通过 DeepEngine 渲染到 APP 端和 Web 端，或者编译为微信小程序代码，用于微信小程序平台发布。

全流程开发工具

开发工具作为开发者的“灵魂伴侣”，伴随在开发者的整个职业生涯里。市面上有很多流行且成熟的工具可供多端开发进行使用，例如 VSCode、Sublime、WebStorm 等。因多端技术 DSL 的个性化，如果能够提供“标准化 + 行业化 + 定制化”的全流程开发工具，包含完备的编码、调试、和发布功能，则能让多端开发工作事半功倍，因此诸如微信和支付宝的小程序开发流程中，均提供了符合自己业务特色的 IDE。

以 APICloud Studio3 多端开发工具为例，它是基于业界领先的代码编辑器 -VSCode 深度定制，支持在 Windows、Mac 和 Linux 系统上运行，在兼容 VSCode 所有能力的基础上：

• 提供舒适的高亮标记以及完善的智能帮助提示和自动完成功能，支持 APICloud 定义的 DSL 编写；
• 提供实时预览和真机调试能力，可直接在工具中调试代码和预览效果，或者使用 Wi-Fi、USB 链接真实的手机进行调试和功能验证；
• 提供简单高效的代码管理，支持 Git 方式的代码管理，同时内置 SVN，简化了复杂的 Git 操作；
• 云端一体，同 APICloud 业务紧密衔接，保持和云端打通，在本地即可实现创建/导入项目，云编译，自定义 Loader，以及模块管理等操作。

统一编译环境

多终端统一编译环境，是一系列代码解析，语法分析，翻译，重构等工具的集合，负责将 DSL 编译为目标编程语言，例如将 Less 编译为 CSS。在多端技术领域，多端编译环境则负责将 DSL 编译为可在 JS 引擎或者 Web 浏览器中执行的标准 JS 和 Html 代码，以及编译为符合微信或者支付宝等小程序技术标准的代码。

编译成功的标准 JS 代码运行于跨平台 APP 引擎中，实现 APP 端功能；小程序代码可直接用于发布到微信或者支付宝小程序平台，实现小程序端功能；Html 代码则可作为 Web 端发布。由此达到一套代码，可同时部署到 APP、小程序、H5 端的目的。

目前常见的多终端编译环境有：

• Mpvue（美团）：支持将 Vue 语法编译为小程序和 H5，支持微信、支付宝等小程序
• Taro（京东）：支持将 React 语法编译为小程序和 H5，支持微信、支付宝等小程序，同时支持生成 React Native APP
• Hippy（腾讯）：同时支持将 Vue 和 React 语法编译为微信小程序和 H5
• Chameleon（滴滴）：支持将其 CML 语法编译到 Web、小程序、Weex APP 等多种终端

APICloud 多终端编译环境目前支持使用类 Html5 技术实现多终端开发，无需搭建特定的终端编译环境，一键云端编译即可生成高质量目标终端代码，可用性高，有利于二次开发。支持编译为 Android / iOS APP、微信小程序以及标准 H5。

以上内容由低代码开发平台 APICloud 提供，想要了解更多推荐学习编程狮（w3cschool.cn）免费课程《APICloud(3.0)-APP&小程序实战开发培训》。