完全跨端，直接发布，无需二次开发；通过优化策略（例如 Tree- 最小化内置组件）提高性能

这应该是uni-app在H5平台上相比其他小程序框架更加友好的地方

背景

随着微信小程序的火爆，以及百度、今日头条小程序的不断推进，跨端开发的需求也越来越迫切。业界出现了一系列跨终端框架，但都没有为H5平台提供完整的跨终端支持。 :

针对客观需求和现状，前端团队响应了开发者完全跨端的号召。经过不断努力，uni-app 1.2版本支持发布到H5平台，充分模拟小程序生命周期、事件处理、组件规范等，真正实现“一套Code，多终端分发”的目标。

本文主要分享我们在发布uni-app到H5平台时，在引擎实现、平滑差异、性能优化等方面所做的工作。

完整的模拟小程序引擎

uni-app设计的开发标准是：Vue.js语法+小程序API+条件编译，扩展平台个性化能力。在：

下面是一个简单的小程序运行时框架，其核心是响应式数据绑定系统。

为了实现小程序与H5的完全跨端，uni-app在H5平台上完全模拟实现了小程序的逻辑层和视图层。与业界其他跨终端框架相比，uni-app在H5平台上的实现更加完善。

页面配置

小程序中的导航栏和选项卡是通过配置文件生成的，配置后由原生组件渲染。 Uni-app在H5平台上也兼容这些配置，但会降级为通过div控件来模拟，因此开发者不需要单独为H5平台添加导航栏或选项卡。

生命周期

uni-app在H5平台上实现了完整的小程序生命周期，为此填补了很多坑。我们举一个详情页之间跳转的例子：

明细A打开明细B，在通常的Web端SPA方案中，明细B的数据会在明细A页面获取。只会触发详情页A的生命周期，不会触发；但在小程序中，会打开一个New并加载 B，此时会触发 A的生命周期，也会触发 B的生命周期； uni-app完全模拟了小程序的生命周期。详情页切换时，会触发等生命周期；这样的实现确保了两端的兼容性。同时，当 B返回 A时， A已经被缓存了，不需要再次在线加载，也会有更高的性能。

方法功能

监控页面加载

监控页面显示

监控页面初始渲染完成

收听页面已隐藏

监控页面卸载

事件处理

uni-app对页面事件处理功能的支持更加全面。下拉刷新、上拉到底等常用功能在H5平台上可以正常复用，无需二次开发。

方法功能

页面相关事件处理函数--监控用户下拉操作

页面下拉事件处理函数

页面滚动触发事件的处理函数

当当前标签页在标签页中时，点击标签时触发。

元件规格

uni-的组件实现有两个特点：

平滑引擎差异元素遮挡

微信小程序是一种+web混合渲染机制。比如小程序的导航栏（）和选项卡（）是原生组件，但H5平台是纯粹的Web渲染，导航栏和选项卡都是由Web实现的。这可能会导致页面元素和导航栏/标签位置互相遮挡的问题，如下定位代码所示：

.fixed{ position: fixed; z-index: 9999; bottom: 0px;//底部距离为0 background-color:peru; } 复制代码

不同平台上的运行效果有所不同，如下图：

uni-app通过引入css变量来解决此类问题，并在编译到不同平台时为css变量设置相应的值。

CSS变量描述小程序H5

- -顶部

内容区域与顶部之间的距离

如果有导航栏，则为导航栏的高度，否则为0

---

内容区域到底部的距离

如果有则为高度，否则为0

有了CSS变量，如果开发者需要处理定位元素，只需要这样写：

.fixed{ bottom:var(--window-bottom)

} 复制代码

CSS 范围

uni-app在开发时遵循Vue单文件组件（SFC）规范。编译成微信小程序时，会生成对应的wxml文件。最终运行时由渲染，iOS平台由基于53内核的XWeb引擎渲染； uni - 应用程序中不同的.vue页面文件（编译后的.wxml文件）将在小程序上以不同的方式呈现。因此，.vue页面文件中的css范围自然是隔离的，开发者不需要添加属性。然而H5平台是一个SPA框架。如果不使用，就会成为全局样式，影响其他页面。 uni-app已在H5平台进行智能处理并自动添加。

平台性能优化

性能一直是Web应用的首要关注点，uni-app在发布到H5平台时也做了很多性能优化。

内置组件按需打包（Tree-）

uni-app有8个类别，数十个内置组件，但开发者在实际开发中只会使用其中的一部分。例如，很多应用程序不会使用地图等组件。如果把uni-app的整个组件类都打包，如果把所有的库都打包的话，会造成巨大的资源浪费，并且会拖慢首页的渲染速度。

uni-app在发布到H5平台时，采用了摇树优化（Tree-）策略，将开发者项目中未使用的组件从整个框架中“摇”出来，保证编译后的JS文件最小化。具体来说，uni-app编译到H5平台时，分为预编译和重新编译两个阶段。在预编译阶段，将vue--分析出来的AST进行映射，生成项目中使用的组件列表，然后根据插件生成项目中使用的组件。将获得的组件编译生成最小化的uni-app框架文件。

我们以uni-app的两个开源项目模板登录模板和图片查看模板为例，测试了Tree-的前后端组件框架的大小，结果令人欣喜。数据如下：

项目优化前 优化后

登录模板

148k

64k

查看图片模板

148k

53k

路由组件按需加载（Lazy-）

当打包构建SPA应用时，包会变得很大，影响页面加载。虽然开发者可以基于Vue的异步组件和代码功能实现路由组件的延迟加载，但是开发者需要调整.vue源码和配置，有一定的学习门槛，相对繁琐。

uni-app实现了H5平台路由组件的自动按需加载。开发者无需调整组件开发方式，只需要关心业务实现。

其他方面

为了提升性能体验，uni-app在很多细节上都有特殊的设计。例如，常见的SPA框架一般采用div区域滚动。为了提高用户体验，uni-app使用了body滚动，这填补了许多陷阱，例如-在不同的页面上。如果使用div滚动，则可以在编译阶段完成。样式定义，但是基于body滚动，需要在页面前进或后退时动态设置body的背景色。

Uni-App在H5平台上的相关代码已全部开源。详情请参见uni-app。欢迎大家star和支持。