共计 5030 个字符,预计需要花费 13 分钟才能阅读完成。
天下苦平台碎片化已久。
在挪动互联网以前,开发者只需幸福的面对 web。进入挪动互联网时代,iOS、Android、H5 以及各种小程序快利用层出不穷,开发者再也幸福不起来。
- 学习 n 个技术
- 开发 n 个版本
- 各版迭代凌乱,无奈拉齐,用户茫然、外部苦楚
- 开发测试老本 n 倍暴涨
后果就是工程师不停加班到头秃,但产品的需要依然做不完、老板的估算始终压不上来,全都苦楚。
uni-app
之前曾经实现了手机端全笼罩,反对 iOS、Android、H5、微信小程序、阿里小程序、百度小程序、字节跳动小程序、QQ 小程序、快利用、360 小程序,并且在各端均有优异的运行性能。
从 2.9 版本起,uni-app
进一步提供了 PC 等宽屏的适配计划,实现了大对立。
开发者终于能够做到应用一个框架,一把撸掉所有我的项目。
不说虚的,先来个理论示例,大家直观感受一下:
如下是基于 uni-app
的DCloud 社区
在 mobile 端的展现成果,列表、详情分为两个页面,点击列表中的帖子,关上详情页面:
如下是基于 uni-app
的DCloud 社区
同一套代码,稍作配置后,在 pc 端的展现成果,列表、详情在同一个页面中左右分栏显示,点击左侧列表中的帖子,刷新右侧详情窗口的内容,这个 UI 更适宜 pc 宽屏,也更有 pc 桌面 App 的体验。
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),在 左 / 右 / 上
三个方向,新扩大 leftWindow
、rightWindow
、topWindow
三个窗体,这三个窗体可设定在屏幕宽度大于某一阀值时主动呈现(展示分栏的宽屏设计),屏幕宽度小于某一阀值后主动隐没(复原单窗口的窄屏设计)。
uni-app
主窗体和扩大的三个窗体各自独立,反对相互通信,点击链接、切换页面时反对在相应的窗体内刷新,而不是整屏刷新。
咱们以本文结尾的 DCloud 社区
为例,解说如何在 uni-app
中快捷实现宽屏适配。
咱们将社区的列表页作为主窗体,将详情内容扩大到 rightWindow
中,示意如下:
接下来分步阐明,如何在 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 治理控制台。
如下是基于 leftwindow
、topwindow
构建的经典 pc admin
布局:
2. 组件级适配:match-media 组件
leftWindow
等计划是页面窗体级适配计划,实用于多页面的组合分栏显示。
那么在同一个页面中,组件是否能够适配不同屏宽?当然能够,此时能够应用组件级适配计划。
除了传统的 css 媒体查问外,uni-app
还提供了全平台兼容的 match-media 组件 和配套的 uni.createMediaQueryObserver 办法。
match-media
是一个媒体查问适配组件,能够更简略的用于动静屏幕适配。
在 match-media
组件中搁置内容,并为该组件指定一组 media query 媒体查问规定,如屏幕宽度。运行时,如屏幕宽度满足查问条件,则这个组件就会被展现,反之则暗藏。
match-media
组件的劣势包含:
- 开发者可能更不便、显式地应用 Media Query 能力,而不是耦合在 CSS 文件中,难以复用。
- 可能在模板中联合数据绑定动静地应用,不仅能做到组件的显示或暗藏,在过程式 API 中可塑性也更高。
- 可能嵌套式地应用 Media Query 组件,即可能满足部分组件布局款式的扭转。
- 组件化之后,封装性更强,可能隔离款式、模版以及绑定在模版上的交互事件,还可能提供更高的可复用性。
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)
}
在手机端,这个显示成果是比拟现实的,如下:
以后抉择 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 2.9+
起,新增了 rpx 按 750px 做基准屏宽的失效范畴管制,即屏幕宽度超过某阀值(默认为 960px)后,将不再以屏幕理论宽度换算元素宽高,而改以固定屏幕宽度(默认为 375px)计算元素宽高。
以上述图文列表为例,当屏幕宽度为 1920px(大于 960px)时,将采纳固定的屏幕宽度(默认 375px)计算缩略图的宽高,即:180*(375/750) = 90px
,高度变为:140*(375/750) = 70px
,依照这个机制,pc 端运行成果如下,相比上图的放大变丑,展示更为理想优雅。
Tips:
- 750px 失效的屏幕宽度阀值,及宽屏时计算所用的固定屏幕宽度,均反对自定义配置
{
"globalStyle": {
"rpxCalcMaxDeviceWidth": 960, // rpx 计算所反对的最大设施宽度,单位 px,默认值为 960
"rpxCalcBaseDeviceWidth": 375, // 设施理论宽度超出 rpx 计算所反对的最大宽度时,rpx 计算所采纳的固定屏幕宽度,单位 px,默认值为 375
}
}
- 开发者可在 rpx 宽度管控的根底上,略作调整,实现更好的 pc 宽屏成果,如宽屏时,固定列表宽度且居中显示,如下图。当然,此处仅为了演示 rpx 在宽屏下的失控治理,理论利用中,可采纳分栏窗口,将列表在左侧分栏中显示,如本文开篇示例截图。
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 旁边搁置二维码,提供手机版扫码地址,如下是一个实现示例:
5. 结语
uni-app 团队将 keep running,持续欠缺 uni-app 在 pc、pad 等宽屏设施上的更好适配,并会在 ssr、serverless 方向上重点投入,提供云端一体的更高效率的解决方案(详见 uniCloud),帮忙企业更高效,帮忙开发者更轻松!
欢送大家到 https://github.com/dcloudio/uni-app 上给咱们 star 激励????