关于vue.js:图文讲解uniapp的PC宽屏适配方案

天下苦平台碎片化已久。

在挪动互联网以前，开发者只需幸福的面对 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 的宽屏响应

手机屏幕和 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 布局：

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 等设施的浏览器上能够不便的横竖屏切换。

设计 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 在宽屏下的失控治理，理论利用中，可采纳分栏窗口，将列表在左侧分栏中显示，如本文开篇示例截图。

有了宽屏适配，uni-app 的利用就能够不便的通过 electron 打包为电脑客户端利用，windows、mac、linux 均反对。

开发者能够随便调用 electron 的 API，以调用更多操作系统的能力（为不便多端兼容，能够将这些非凡 API 写在自定义的条件编译里）

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

如果你的 h5 版曾经开发结束，还没来得及适配 pc，但想在 pc 上先用起来。那么能够在 pc 网页里应用 iframe，约定好宽度，在外面套用 uni-app 的窄屏版。

当然还能够在 iframe 旁边搁置二维码，提供手机版扫码地址，如下是一个实现示例：

uni-app 团队将 keep running，持续欠缺 uni-app 在 pc、pad 等宽屏设施上的更好适配，并会在 ssr、serverless 方向上重点投入，提供云端一体的更高效率的解决方案（详见 uniCloud），帮忙企业更高效，帮忙开发者更轻松！

欢送大家到 https://github.com/dcloudio/uni-app 上给咱们 star 激励????

关于vue.js:图文讲解uniapp的PC宽屏适配方案

1. 窗体级适配：leftwindow 分栏

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

3. rpx 的宽屏响应

4. 补充

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

4.2 一个让手机版网页长期可用于 pc 浏览器的计划

5. 结语