天下苦平台碎片化已久。

在挪动互联网以前，开发者只需幸福的面对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组件的劣势包含：

  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)}

在手机端，这个显示成果是比拟现实的，如下：

以后抉择 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激励????