回复 刷新

暂无评论

如何用uni-app快速将Vue项目输出到小程序和H5

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

Vue技术栈的小程序框架:对于H5平台支持普遍较弱

部分React技术栈的小程序框架:虽支持生成可在H5端运行的代码,但仅仅是代码可运行,离项目直接发行上线的目标还存在一定差距。

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

完整模拟小程序引擎

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

  1. Vue.js 的语法在微信小程序端,uni-app是在mpvue的基础上增强实现的,在H5端则默认支持;
  2. 而小程序的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已被缓存,无需再次联网加载,也会有更高的性能。

在这里插入图片描述

事件处理

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

在这里插入图片描述

组件规范

uni-appH5平台的组件实现,有两个特点:

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

抹平引擎差异

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变量,开发者若需处理 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 作用域是天然隔离的,开发者无需在