使用uni-app快速将Vue项目输出到小程序、H5

1. 跨端完全，直接发行，无需二次开发；
2. 经过Tree-Shaking摇出最小化内置组件等优化策略，提高性能

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

背景

随着微信小程序的火爆及百度、头条小程序的持续推动，跨端开发的需求愈发迫切，业界随之出现了一系列的跨端框架，但对于H5平台跨端支持的都不太完全：

• Vue技术栈的小程序框架：对于H5平台支持广泛较弱
• 部分React技术栈的小程序框架：虽支持生成可在H5端运行的代码，但仅仅是代码可运行，离项目直接发行上线的目标还存在必定差距。

鉴于客观需求及现状，DCloud前端团队响应开发者完全跨端的呼声，通过连续奋战，uni-app 1.2版本支持发行到H5平台，完整模拟小程序生命周期、事件处理、组件规范等，真正实现“一套代码、多端发行”的目标。

本文主要分享，咱们在实现uni-app发行到H5平台时，在引擎实现、差别抹平、性能优化方面都作了哪些工做。

完整模拟小程序引擎

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

• Vue.js 的语法在微信小程序端，uni-app是经过编译器 + 运行时加强实现，在H5端则默认支持；
• 而小程序的API，其实包括三个部分：框架 + 组件（UI）+ 接口（API），这三部分在微信小程序端是内置支持的，而uni-app若要发布到H5平台，则需完整模拟实现小程序运行时环境。

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

为实现小程序、H5两端的完整跨端，uni-app在H5平台完整模拟实现了小程序的逻辑层和视图层，相比业界其它跨端框架，uni-app在H5平台有以下几点实现更完善。

页面配置

小程序中的导航条、选项卡是经过配置文件生成的，配置后由原生组件进行渲染，uni-app在H5平台一样兼容这些配置，不过会降级经过div控件模拟实现，所以开发者无需单独为H5平台添加导航条或选项卡。

生命周期

uni-app在H5平台实现了完整的小程序生命周期，为此填了不少坑。举一个详情页互跳的栗子：

详情A 打开 详情B，在一般的 web 端 SPA 方案中，会在详情A页面获取B详情的数据，仅会触发详情页A的updated生命周期，不会触发onHide；但在小程序中，则会打开一个新的webview并加载详情B，此时会触发详情A的onHide生命周期，也会触发详情B的onShow生命周期；uni-app完整模拟了小程序的生命周期，详情页之间互相切换时，会触发onHide、onShow等生命周期；这样的实现，即保证了两端兼容性，同时在详情B返回详情A时，详情A已被缓存，无需再次联网加载，也会有更高的性能。

方法	做用
onLoad	监听页面加载
onShow	监听页面显示
onReady	监听页面初次渲染完成
onHide	监听页面隐藏
onUnload	监听页面卸载

事件处理

uni-app对于页面事件处理函数支持更为全面，下拉刷新、上拉触底等经常使用函数都可在H5平台正常复用，无需二次开发。

方法	做用
onPullDownRefresh	页面相关事件处理函数--监听用户下拉动做
onReachBottom	页面上拉触底事件的处理函数
onPageScroll	页面滚动触发事件的处理函数
onTabItemTap	当前是 tab 页时，点击 tab 时触发

组件规范

uni-appH5平台的组件实现，有两个特色：

• 兼容的组件数量更多：好比navigator等组件在H5平台可正常跳转
• 组件属性、嵌套实现更接近小程序实现

抹平引擎差别

fixed元素遮挡

微信小程序是一种 native + web 混合渲染的机制，好比小程序的导航条（navigationBar）、选项卡（tabBar）为原生组件，但H5平台为纯 web 渲染，导航条、选项卡均为 web 实现，这可能引起页面 fixed 元素 和导航条/选项卡位置发生互相遮挡的问题，以下一段 fixed 定位的代码：

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

在不一样平台上运行效果不一样，以下图所示：

uni-app经过引入css变量解决这类问题，在编译到不一样平台时，给css变量设置对应的值。

CSS变量	描述	小程序	H5
--window-top	内容区域距离顶部的距离	0	如有导航条则为导航条 的高度，不然为0
--window-bottom	内容区域距离底部的距离	0	如有TabBar则为TabBar 的高度，不然为0

有了css变量，开发者若需处理 fixed 定位的元素，只需像以下方式编写便可：

.fixed{
    bottom:var(--window-bottom)
}
复制代码

css做用域

uni-app在开发时遵循 Vue 单文件组件 (SFC) 规范，编译到微信小程序时会生成对应的 wxml 文件，最终运行时由 webview 渲染，iOS 平台由 WKWebView 渲染，Android 平台由 XWeb 引擎基于 Mobile Chrome 53 内核渲染；uni-app中的不一样.vue页面文件( 编译后的.wxml 文件)，在小程序端会由不一样的 webview 渲染，故 .vue页面文件中的 css 做用域是自然隔离的，开发者无需在<style> 标签上增长scoped 属性。但H5平台是一套SPA框架，无scoped就会变成全局样式，影响其余页面。uni-app在H5平台作了智能处理，自动增长了scoped。

平台性能优化

性能一直是 web app 首要关注的焦点，uni-app发行到H5平台时也作了不少性能优化。

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

uni-app有8大类、几十个内置组件，但开发者实际开发时仅会使用其中的一部分组件，好比不少App不会用到map、canvas等组件，若打包时将uni-app整个组件类库都打包进去，则会形成极大的资源浪费，延迟首页渲染速度。

uni-app发行到H5平台时采用了摇树优化（Tree-Shaking）策略，将开发者项目中没用到的组件从整个框架中“摇”掉，保证编译后的 JS 文件最小化。具体来讲，uni-app编译到H5平台时分为预编译、再编译两个阶段，预编译阶段经过vue-template-compiler分析出来的AST，映射生成项目中使用到的组件清单，而后再基于Webpack插件将使用到的组件编译生成一个最小化的uni-app框架文件。

咱们以uni-app的两个开源项目模板登陆模板、看图模板为例，测试 Tree-Shaking 先后组件框架的大小，效果喜人，数据以下：

项目	优化前	Shaking优化后
登陆模板	148k	64k
看图模板	148k	53k

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

当打包构建 SPA 应用时，Javascript 包会变得很是大，影响页面加载。虽然开发者基于Vue 的异步组件和 Webpack 的code-splitting 功能，能够实现路由组件的懒加载，但开发者需调整.vue源码及Webpack配置，有必定的学习门槛，且比较繁琐。

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

其它方面

uni-app为提高性能体验，在不少细节上都有特殊设计。好比常见的 SPA 框架通常采用div区域滚动，uni-app为改善用户体验，使用的是body滚动，由此填了不少坑，好比不一样页面的background-color，若使用div滚动，则在编译阶段就可完成样式定义，但基于body滚动，就须要在页面前进、后退时动态设置body的背景色。

github

uni-app在H5平台的相关代码均已所有开源，详见uni-app，欢迎你们 star 支持.