【小程序】图文讲解uni-app的PC宽屏适配方案

天下苦平台碎片化已久。

在移动互联网以前,开发者只需幸福的面对web。进入移动互联网时代,iOS、Android、H5以及各种小程序快应用层出不穷,开发者再也幸福不起来。

  • 学习n个技术
  • 开发n个版本
  • 各版迭代混乱,无法拉齐,用户茫然、内部痛苦
  • 开发测试成本n倍暴涨

结果就是工程师不停加班到头秃,但产品的需求仍然做不完、老板的预算一直压不下去,全都痛苦。

uni-app之前已经实现了手机端全覆盖,支持iOS、Android、H5、微信小程序、阿里小程序、百度小程序、字节跳动小程序、QQ小程序、快应用、360小程序,并且在各端均有优异的运行性能。

从2.9版本起,uni-app 进一步提供了PC等宽屏的适配方案,完成了大统一。

开发者终于可以做到使用一个框架,一把撸掉所有项目。

【小程序】图文讲解uni-app的PC宽屏适配方案

不说虚的,先来个实际示例,大家直观感受一下:

如下是基于uni-appDCloud社区在mobile端的展示效果,列表、详情分为两个页面,点击列表中的帖子,打开详情页面:

【小程序】图文讲解uni-app的PC宽屏适配方案

如下是基于uni-appDCloud社区同一套代码,稍作配置后,在pc端的展示效果,列表、详情在同一个页面中左右分栏显示,点击左侧列表中的帖子,刷新右侧详情窗口的内容,这个UI更适合pc宽屏,也更有pc桌面App的体验。

【小程序】图文讲解uni-app的PC宽屏适配方案

Tips:点击 DCloud社区演示系统,自己感受PC和Mobile的自适应。

怎么样?有没有被酷到?

下面我们具体来讲讲uni-app的pc宽屏适配方案,总的来说,包括三个方面:

  • 窗体级适配:leftwindow、rightwindow、topwindow等分栏
  • 组件级适配:match-media组件
  • rpx的宽屏响应

1. 窗体级适配:leftwindow分栏

手机屏幕和PC显示器的设计不同。为了方便手持及接听电话,大多手机的设备高度大于设备宽度(即为窄屏设计),故mobile App 多为竖屏/窄屏显示的UI。

而pc显示器多为宽屏设计,即设备宽度大于设备高度,在pc上的桌面应用,很多会采用左右分栏的UI设计。

uni-app以目前手机屏幕为主窗体(window),在左/右/上三个方向,新扩展 leftWindowrightWindowtopWindow三个窗体,这三个窗体可设定在屏幕宽度大于某一阀值时自动出现(展现分栏的宽屏设计),屏幕宽度小于某一阀值后自动消失(恢复单窗口的窄屏设计)。

uni-app主窗体和扩展的三个窗体各自独立,支持互相通信,点击链接、切换页面时支持在相应的窗体内刷新,而不是整屏刷新。

我们以本文开头的DCloud社区为例,讲解如何在uni-app中快捷实现宽屏适配。

我们将社区的列表页作为主窗体,将详情内容扩展到rightWindow中,示意如下:

【小程序】图文讲解uni-app的PC宽屏适配方案

接下来分步说明,如何在uni-app项目中完成分栏实现。

step 1: 新建right-window.vue展现帖子详情

当然,rightWindow无需重写新闻详情页面,是可复用原有代码的,支持把已有详情页面当组件放到 rightWindow 页面中,如下:

<!-- responsive/right-window.vue -->

<template>

<view>

<!-- 将原来的详情页(/pages/detail/detail.vue),作为一个组件(pages-detail-detail)使用 -->

<pages-detail-detail ref="detailPage"></pages-detail-detail>

</view>

</template>

<script>

export default {

created(e) {

//监听自定义事件,该事件由左侧列表页的点击触发

uni.$on('updateDetail', (e) => {

// 执行 detailPage组件,即:/pages/detail/detail.vue 页面的load方法

this.$refs.detailPage.load(e.detail);

})

}

}

</script>

step 2: 在列表页面,处理点击列表后与rightWindow交互通信的逻辑。

// 列表页的改造

goDetail(detail) {

if (this._isWidescreen) {

//若为宽屏,则触发右侧分栏详情页的自定义事件,通知右侧窗体刷新新闻详情

uni.$emit('updateDetail', {

detail: encodeURIComponent(JSON.stringify(detail))

})

} else {

// 若为窄评,则打开新窗体,在新窗体打开详情页面

uni.navigateTo({

url: '/pages/detail/detail?query=' + encodeURIComponent(JSON.stringify(detail))

});

}

},

step 3: 在pages.json中注册rightWindow,如下:

{

"rightWindow": {

"path": "responsive/right-window.vue", // 指定 rightWindow 页面文件

"style": {

"width": "calc(100vw - 400px)" // 页面宽度

},

"matchMedia": {

"minWidth": 768 //生效条件,当窗口宽度大于768px时显示

}

}

}

可以看到,无需太多工作量,就可以快速把一个为手机窄屏开发的应用,快速适配为PC宽屏应用。并且以后的代码维护,仍然是同一套,当业务迭代时不需要多处升级。

这套方案的实施,有如下特征:

  • 原先为手机窄屏开发的代码,基本无需修改,可完全适配到pc宽屏上;后续新增的业务模块,也是一套代码,同时兼容款窄屏。
  • 增加pc宽屏适配后,不影响原先mobile端的窄屏实现,窄屏上会自动隐藏leftWindow/rightWindow等扩展窗体。
  • rightWindow里的页面是复用的,不需要重写新闻详情页面,支持把已有详情页面当组件放到 rightWindow 页面中。

更多配置细节,详见文档:https://uniapp.dcloud.net.cn/collocation/pages?id=topwindow

leftWindow方案除了适用于将原有的Mobile App适配到大屏显示,也适用于新开发的PC应用,尤其是PC Admin管理控制台。

如下是基于leftwindowtopwindow构建的经典pc admin布局:

【小程序】图文讲解uni-app的PC宽屏适配方案

2. 组件级适配:match-media组件

leftWindow等方案是页面窗体级适配方案,适用于多页面的组合分栏显示。

那么在同一个页面中,组件是否可以适配不同屏宽?当然可以,此时可以使用组件级适配方案。

除了传统的css媒体查询外,uni-app还提供了全平台兼容的 match-media组件 和配套的 uni.createMediaQueryObserver 方法。

match-media是一个媒体查询适配组件,可以更简单的用于动态屏幕适配。

match-media组件中放置内容,并为该组件指定一组 media query 媒体查询规则,如屏幕宽度。运行时,如屏幕宽度满足查询条件,则这个组件就会被展示,反之则隐藏。

match-media组件的优势包括:

  1. 开发者能够更方便、显式地使用 Media Query 能力,而不是耦合在 CSS 文件中,难以复用。
  2. 能够在模板中结合数据绑定动态地使用,不仅能做到组件的显示或隐藏,在过程式 API 中可塑性也更高。
  3. 能够嵌套式地使用 Media Query 组件,即能够满足局部组件布局样式的改变。
  4. 组件化之后,封装性更强,能够隔离样式、模版以及绑定在模版上的交互事件,还能够提供更高的可复用性。

uni-app推荐采用运行时动态适配的方案,而不是为PC版单独编写条件编译(虽然你也可以通过自定义条件编译来实现单独的PC版)。这样设计的好处是在ipad等设备的浏览器上可以方便的横竖屏切换。

3. rpx的宽屏响应

设计Mobile App时,设计师常会以 iPhone6 作为视觉稿的标准,即按照750px屏幕宽度出图;程序员以750px作为基准,根据设备实际尺寸,动态换算(缩放)出适合当前设备屏幕的元素宽高。

这就是rpx(responsive pixel)的实现思路,只不过rpx由框架引擎动态换算元素尺寸,无需程序员写代码干预。

面向mobile端时,rpx是一种很理想的解决方案,因为各种移动设备的屏幕宽度差异不是很大,相对于750px微调缩放后的效果,可最大化的还原设计师的设计。

但是,一旦脱离移动设备,在pc屏幕,或者pad横屏状态下,因为屏幕宽度远大于750了。此时rpx根据屏幕宽度变化的结果就严重脱离了预期,大的惨不忍睹。

假设一个图文列表的展现,我们针对左侧缩略图定义如下css:

.uni-media-list-logo {

width: 180rpx;

height: 140rpx;411*(180/750)411*(180/750)411*(180/750)

}

在手机端,这个显示效果是比较理想的,如下:

【小程序】图文讲解uni-app的PC宽屏适配方案

当前选择 pixel 2作为模拟设备,屏幕宽度为411px,故缩略图的宽度变为:180*(411/750) = 98px,高度变为:140*(411/750) = 76px,这个理论计算和实际运行相符,且效果较佳。

同样的代码,如果运行到pc端,假设屏幕宽度为1920px,则缩略图的尺寸将变为:180*(1920/750) = 460px,高度变为:140*(1920/750) = 358px,这个惨不忍睹的大就出来了,一个1920*1080的显示器,只能显示2条记录(主要是缩略图高度放大导致的),效果如下:

【小程序】图文讲解uni-app的PC宽屏适配方案

为此,在uni-app 2.9+起,新增了 rpx 按750px做基准屏宽的生效范围控制,即屏幕宽度超过某阀值(默认为960px)后,将不再以屏幕实际宽度换算元素宽高,而改以固定屏幕宽度(默认为375px)计算元素宽高。

以上述图文列表为例,当屏幕宽度为1920px(大于960px)时,将采用固定的屏幕宽度(默认375px)计算缩略图的宽高,即:180*(375/750) = 90px,高度变为:140*(375/750) = 70px,按照这个机制,pc端运行效果如下,相比上图的放大变丑,展现更为理想优雅。

【小程序】图文讲解uni-app的PC宽屏适配方案

Tips:

  • 750px生效的屏幕宽度阀值,及宽屏时计算所用的固定屏幕宽度,均支持自定义配置

{

"globalStyle": {

"rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度,单位 px,默认值为 960

"rpxCalcBaseDeviceWidth": 375, // 设备实际宽度超出 rpx 计算所支持的最大宽度时,rpx计算所采用的固定屏幕宽度,单位 px,默认值为 375

}

}

  • 开发者可在rpx宽度管控的基础上,略作调整,实现更好的pc宽屏效果,如宽屏时,固定列表宽度且居中显示,如下图。当然,此处仅为了演示rpx在宽屏下的失控管理,实际应用中,可采用分栏窗口,将列表在左侧分栏中显示,如本文开篇示例截图。

【小程序】图文讲解uni-app的PC宽屏适配方案

4. 补充

4.1 通过electron打包为windows、mac、linux客户端

有了宽屏适配,uni-app的应用就可以方便的通过electron打包为电脑客户端应用,windows、mac、linux均支持。

开发者可以随意调用electron的API,以调用更多操作系统的能力(为方便多端兼容,可以将这些特殊API写在自定义的条件编译里)

uni-app插件市场有已经封装好的一些插件,详见:https://ext.dcloud.net.cn/search?q=electron

4.2 一个让手机版网页临时可用于pc浏览器的方案

如果你的h5版已经开发完毕,还没来得及适配pc,但想在pc上先用起来。那么可以在pc网页里使用iframe,约定好宽度,在里面套用uni-app的窄屏版。

当然还可以在iframe旁边放置二维码,提供手机版扫码地址,如下是一个实现示例:

【小程序】图文讲解uni-app的PC宽屏适配方案

5. 结语

uni-app团队将keep running,继续完善uni-app在pc、pad等宽屏设备上的更好适配,并会在ssr、serverless方向上重点投入,提供云端一体的更高效率的解决方案(详见uniCloud),帮助企业更高效,帮助开发者更轻松!

欢迎大家到https://github.com/dcloudio/uni-app上给我们star鼓励😄

以上是 【小程序】图文讲解uni-app的PC宽屏适配方案 的全部内容, 来源链接: utcz.com/a/101394.html

回到顶部