专栏首页极乐技术社区如何用uni-app快速将Vue项目输出到小程序和H5

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

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

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

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

完整模拟小程序引擎

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

  • Vue.js 的语法在微信小程序端,uni-app是在mpvue的基础上增强实现的,在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完整模拟了小程序的生命周期,详情页之间互相切换时,会触发onHideonShow等生命周期;这样的实现,即保证了两端兼容性,同时在详情B返回详情A时,详情A已被缓存,无需再次联网加载,也会有更高的性能。

事件处理

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

组件规范

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变量,开发者若需处理 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

平台性能优化

性能一直是webapp首要关注的焦点,uni-app发行到H5平台时也做了很多性能优化。

内置组件按需打包(Tree-Shaking)

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

uni-app发行到H5平台时采用了摇树优化(Tree-Shaking)策略,将开发者项目中没用到的组件从整个框架中“摇”掉,保证编译后的 JS 文件最小化。

具体来说,uni-app编译到H5平台时分为预编译、再编译两个阶段,预编译阶段通过vue-template-compiler分析出来的AST,映射生成项目中使用到的组件清单,然后再基于Webpack插件将使用到的组件编译生成一个最小化的uni-app框架文件。

我们以uni-app的两个开源项目模板登录模板、看图模板为例,测试 Tree-Shaking 前后组件框架的大小,效果喜人,数据如下:

路由组件按需加载(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的背景色。

本文分享自微信公众号 - 极乐技术社区(wxapp-union),作者:DCloud前端团队

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-12-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • uni-app黑魔法:小程序自定义组件运行到H5平台

    移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS、Android是当时两大平台。

    CHB
  • uni-app: 如何高效开发?

    本文主要是讲解Uni-App开发技巧,如何快速的撸码?如何调试Uni-App?通过本文,让小伙伴们开发出优秀的Uni-App。

    Javanx
  • uni-app开发H5使用vue-router

    在uni-app项目根目录 执行 npm install uni-simple-router

    代码哈士奇
  • (1)前端框架uni-app

    uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势。

    达达前端
  • 全平台小程序开发框架Uni-app重点概览

    uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

    魏晓蕾
  • vivo悟空活动中台 - 微组件多端探索

    随着小程序、快应用的用户体验越来越友好,用户群体庞大,运营小伙伴开始偏向将营销活动投放至微信、支付宝、快应用等微应用中。

    2020labs小助手
  • 终极跨平台方案uni-app

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到 iOS、Android、H5、小程序 等多个平台。

    hedeqiang
  • 小程序开发框架对比(wepy/mpvue/uni-app/taro)

    uni-app 团队投入两周完成了这个深度评测,下面我们就分享下,实际开发不同框架的测试例时遇到的问题,以及在各端的兼容测试结果。在本文里,我们团队基于真实测...

    码客张
  • 想跨端开发小程序?这个最流行的跨端框架一定要学习!

    从最早发布的微信小程序,到后来的支付宝小程序、字节跳动小程序、百度小程序、QQ小程序,还有最近发布的360小程序,面对这么多套的代码,开发者该如何开发呢?

    极乐君
  • 【云+社区年度征文】uni-app初体验

    为了实现多端兼容,也综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范(摘自官网):

    小异常
  • uni-app: 从运行原理上面解决性能优化问题

    Uni-App,从了解到开发,相信大家都会觉得Uni-App性能不好,其实也这是非原生的弊病。React Native、Flutter等,非原生框架,性能上都会...

    Javanx
  • 小程序框架选型必看:Taro vs uni-app选型经历!

    公司新产品要求发布到各家小程序,最近研究对比了社区主流的几家小程序开发框架,独坑不如拉人众坑,分享给各位,欢迎和我一起入坑:)

    极乐君
  • 真实测评揭秘:开发小程序用原生还是选框架?

    自 2017-1-9微信小程序诞生以来,历经几年的迭代升级,已有数百万小程序上线,成为继Web、iOS、Android之后,第四大主流开发技术。

    极乐君
  • Uni-App项目搭建以及准备工作

    Uni-App项目开发,需要“定制化IDE”,也就是“HBuilderX”工具,主要是因为模拟运行调试一块,其他IDE不具备,其他功能和VS code、Subm...

    Javanx
  • 真实测评:用uni-app开发小程序,比原生开发好用在哪里?

    原生wxml开发对Node、预编译器、webpack支持不好,影响开发效率和工程构建流程。所以大公司都会用框架开发

    极乐君
  • 小程序跨端开发框架深度横评之2020版

    这一年,小程序在用户规模及商业化方面都取得了极大的成功。微信小程序日活超过3亿,支付宝、百度、字节跳动小程序的月活也纷纷超过3亿。

    CHB
  • JNPF低代码开发平台移动端项目命令行打包H5改造

    JNPF 开发平台的移动端是基于 uni-app 进行开发的,所以可以实现多端应用的快速开发。 但是部署流程就略显繁琐了,JNPF 的移动端并不支持命令行调用...

    薛定喵君
  • Vue.js 一套代码,发布到iOS、Android、H5、以及各种小程序

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/...

    Javanx
  • 强推!个人和企业都需要的终极跨平台全端解决方案,一次开发全端覆盖

    1.很多中小型企业要快速开发一个产品,这个产品至少需要覆盖平台范围为:iOS、Android、web/H5、微信/支付宝小程序,那么需要的投入的人力成本、时间成...

    腾讯NEXT学位

扫码关注云+社区

领取腾讯云代金券