APP开发逻辑架构图 app开发的三大技术框架

Uni-App开发框架介绍1. Uni-App简介

Uni-App是一家公司（DCloud）产品，公司承诺将一直开源且免费。

公司旗下有4个产品：

2. Uni-App的优势

个人觉得最核心的优势是，uni-app适合小公司，在只有前端开发人员的情况下，很方便地调用原生的功能，并且还能同时在微信小程序以及App商城上架App，大大降低了App开发的门槛，加快了业务开发和扩展速度。里写自定义目录标题)

二、Uni-App的技术架构1. 技术架构

2、技术栈

html+css+JavaScript+vue+uni-app自定义标签

uni-app项目要求使用vue格式组织编码文件格式（跟微信小程序的语法也很类似，因为都是参照的vue格式），但是html标签不再完全是原始的html标签。譬如div->view，span->text等等。意味着，如果一个项目使用了uni-app开发，那么后续是没法再转换为VUE项目或者小程序项目了。

基本语言和开发规范

uni-app代码编写，基本语言包括js、vue、css。以及ts、scss等css预编译器。

在app端，还支持原生渲染的nvue，以及可以编译为kotlin和swift的uts。

DCloud还提供了使用js编写服务器代码的uniCloud云引擎。所以只需掌握js，你可以开发web、Android、iOS、各家小程序以及服务器等全栈应用。

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

uni-app分编译器和运行时（runtime）。uni-app能实现一套代码、多端运行，是通过这2部分配合完成的。

编译器将开发者的代码进行编译，编译的输出物由各个终端的runtime进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。

编译器

编译器支持条件编译，即可以指定某部分代码只编译到特定的终端平台。从而将公用和个性化融合在一个工程中。

运行时（runtime）

runtime不是运行在电脑开发环境，而是运行在真正的终端上。

uni-app在每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。这是一个比较庞大的工程。

在小程序端，uni-app的runtime，主要是一个小程序版的vue runtime，页面路由、组件、api等方面基本都是转义。

在web端，uni-app的runtime相比普通的vue项目，多了一套ui库、页面路由框架、和uni对象（即常见API封装）

在App端，uni-app的runtime更复杂，可以先简单理解为DCloud也有一套小程序引擎，打包app时将开发者的代码和DCloud的小程序打包成了apk或ipa。当然，事实上DCloud确实有小程序引擎产品，供原生应用实现小程序化，详见

uni-app runtime包括3部分：基础框架、组件、API。

基础框架：

包括语法、数据驱动、全局文件、应用管理、页面管理、js引擎、渲染和排版引擎等

在web和小程序上，不需要uni-app提供js引擎和排版引擎，直接使用浏览器和小程序的即可。但app上需要uni-app提供

App的js引擎：App-Android上，uni-app的js引擎是v8，App-iOS是jscore

App的渲染引擎：同时提供了2套渲染引擎，.vue页面文件由webview渲染，原理与小程序相同；.nvue页面文件由原生渲染，原理与react native相同。开发者可以根据需要自主选择渲染引擎。组件：API：

DCloud还提供了插件市场，大多数用得着的组件和API都已经有现成的插件。

逻辑层和渲染层分离

在web平台，逻辑层（js）和渲染层（html、css），都运行在统一的webview里。

但在小程序和app端，逻辑层和渲染层被分离了。

分离的核心原因是性能。过去很多开发者吐槽基于webview的app性能不佳，很大原因是js运算和界面渲染抢资源导致的卡顿。

不管小程序还是app，逻辑层都独立为了单独的js引擎，渲染层仍然是webview（app上也支持纯原生渲染）。

所以注意小程序和app的逻辑层都不支持浏览器专用的window、dom等API。app只能在渲染层操作window、dom，即renderjs。

关于逻辑层和渲染层分离带来的注意事项，请详读

3. 项目构建&调试三、同类型框架对比四、Uni-App的开发实战1.新项目开发2.旧项目转换3.嵌入到移动端

对比H5版本和小程序版本效果。

H5版本

可在PC和移动端浏览器打开，可在App的WebView中开发

输出格式

PC浏览器

android浏览器

iPhone浏览器

android App中的WebView

H5

✅

✅

✅

✅

Uni小程序版本

接入Uni-app的小程序sdk，将前端输出为uni-app小程序，在App中小程序的方式运行。

接入结果：接入成功，可正常运行。与H5版本对比，流畅度区别不大。（只在android端做了验证）

启动时间&App包体积：

输出格式

冷启动时长

包体积(arm64-v8a debug)

内存占用

打开小程序页面耗时

未接入Uni-app小程序sdk

488ms

11.6m

52M

NA

接入Uni-app小程序sdk

670ms

23.3m

48M+114M+61M(多进程)

327ms

启动时间测量方式：

通过脚本自动化启动/关闭Demo App首页Activity，提取logcat中的Displayed时间作为启动时间，采样20次取平均值。

主要命令如下：

登录后复制

startupcommand = 'adb shell am start -n com.youdao.uni_apptestdemo/.MainActivity'
    obtainLogCommand = 'adb logcat | grep "Displayed" > tmp.txt'
    stopCommand = 'adb shell am force-stop com.youdao.uni_apptestdemo'
    proc=subprocess.Popen(obtainLogCommand,shell=True)
    for i in range(20):
        os.system(startupcommand)
        time.sleep(2)
        os.system(stopCommand)
        time.sleep(10)
    proc.terminate()
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

Demo下载：

说明：

五、总结1. 整体评价

开发体验不错，HBuilderX IDE功能完善，自动化程度高，代码提示、代码补全、代码跳转均支持，代码运行、预览、调试方便，多平台模拟器及工具衔接完善

App功能配置，原生功能支持丰富，并且可在IDE中一键集成，非常方便

社区生态比较庞大，在调研接入的过程中，配到的问题都能得到及时解决

2. 注意事项

uni-app有广告接入服务，其对接了目前市场上的一些主流广告商，使用uni-app开发的app基本不能自由接入其他的广告平台，有一些因为接入第三方广告平台而导致App功能无法使用的案例。官方表述如下