微信小程序 折叠屏适配

最近维护了将近的一年的微信小程序（某知名企业），突然提出要兼容折叠屏，这款小程序主要功能一些图表汇总展示，也就是专门给一些领导用的，也不知道为啥领导们为啥突然喜欢用折叠屏手机了，一句话需求，苦的还是咱们程序员，但没办法，谁让甲方是爸爸呢，硬着头皮改吧，好在最后解决了，因为是甲方内部使用的小程序，这里不便贴图，但有官方案例图片，以供参考

查看了微信官网 大屏适配 响应显示区域变化

启用大屏模式

从小程序基础库版本 2.21.3 开始，在 Windows、Mac、车机、安卓 WMPF 等大屏设备上运行的小程序可以支持大屏模式。可参考小程序大屏适配指南。方法是：在 app.json 中添加 "resizable": true

看到这里我心里窃喜，就加个配置完事了？这也太简单了，但后面证明我想简单了， 主要有两大问题：

• 1 尺寸不同的情况下内容展示效果兼容问题
• 2 预览版和体验版 大屏模式冷启动会生效，但热启动 和 菜单中点击重新进入小程、授权操作，会失效变成窄屏

解决尺寸问题

因为css的长度单位大部分用的 rpx，窄屏和宽屏展示差异出入较大，别说客户不认，自己这关就过不了，简直都不忍直视，整个乱成一片，尤其登录页，用了定位，更是乱上加乱。

随后参考了官方的文档 小程序大屏适配指南和自适应布局，方案对于微信小程序原生开发是可行的，但这个项目用的 uni-app开发的，虽然uni-app 也有对应的响应式布局组件，再加上我是个比较爱偷懒的人（甲方给的工期事件也有限制），不可能花大量时间把所有也页面重新写一遍布局，这是不现实的。

于是又转战到uni-app官网寻找解决方案 uni-app宽屏适配指南

内容缩放拉伸的处理

• 1.局部拉伸：页面内容划分为固定区域和长宽动态适配区域，固定区域使用固定的px单位约定宽高，长宽适配区域则使用flex自动适配。当屏幕大小变化时，固定区域不变，而长宽适配区域跟着变化
• 2.等比缩放：根据页面屏幕宽度缩放。rpx其实属于这种类型。在宽屏上，rpx变大，窄屏上rpx变小。

随后看到这句话特别符合我的需求，哈哈 省事 省事 省事

策略2省事，设计师按750px屏宽出图，程序员直接按rpx写代码即可。但策略2的实际效果不如策略1好。程序员使用策略1，分析下界面，设定好局部拉伸区域，这样可以有更好的用户体验

具体实现

1.配置 pages.json 的 globeStyle

{
  "globalStyle": {
    "rpxCalcMaxDeviceWidth": 1200, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
    "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
    "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750
  },
}

2.单位兼容

还有一点官方也提出来了很重要，那就很多时候 会把宽度750rpx 当成100% 使用，这在宽屏的设备上就会有问题， uniapp给了两种解决方案

• 750rpx 改为100%
• 另一种是配置rpxCalcIncludeWidth，设置某个特定数值不受rpxCalcMaxDeviceWidth约束

想要用局部拉伸：页面内容划分为固定区域和长宽动态适配区域”的策略，单位必须用px

添加脚本

项目根目录新增文件 postcss.config.js 内容如下。则在编译时，编译器会自动转换rpx单位为px。

// postcss.config.js

const path = require('path')
module.exports = {
  parser: 'postcss-comment',
  plugins: {
    'postcss-import': {
      resolve(id, basedir, importOptions) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    },
    'autoprefixer': {
      overrideBrowserslist: ["Android >= 4", "ios >= 8"],
      remove: process.env.UNI_PLATFORM !== 'h5'
    },
    // 借助postcss-px-to-viewport插件，实现rpx转px，文档：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
    // 以下配置，可以将rpx转换为1/2的px，如20rpx=10px，如果要调整比例，可以调整 viewportWidth 来实现
    'postcss-px-to-viewport': {
      unitToConvert: 'rpx',
      viewportWidth: 200,
      unitPrecision: 5,
      propList: ['*'],
      viewportUnit: 'px',
      fontViewportUnit: 'px',
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: undefined,
      include: undefined,
      landscape: false
    },
    '@dcloudio/vue-cli-plugin-uni/packages/postcss': {}
  }
}

大屏模式失效问题

下面重头戏来了，这期间经历 蜿蜒曲折 ，到头来发现都是无用功，我自己都有被wx蠢到发笑，唉，

样式问题解决后 开始着重钻研 大屏失效的问题，但看了官方的多端适配示例demo，人家的就是好的，那就应该有解决办法，于是转战github地址 下项目，谁知这项目暗藏机关，各种报错，让你跑不起来。。。。，让我一度怀疑腾讯也这么拉跨

还好issues 区一位大神有解决办法 感兴趣的老铁可以去瞅瞅

另外 微信小程序开发工具需要取消这两项，最后当项目跑起来后我还挺开心，模拟器上没有问题，但用真机预览的时候我啥眼了，还是窄屏，偶尔可以大屏，后面发现 冷启动是大屏，热启动和点击右上角菜单中的重新进入小程序按钮都会自己变成窄屏幕

这是官方的项目啊，为啥人家的可以，我本地跑起来却不可以，让我一度怀疑这里有内幕，经过几轮测试还是不行，于是乎，我开始了各种询问查资料，社区、私聊、评论、github issues，最后甚至 统计出来了 多端适配示例demo 开发者的邮箱 挨个发了邮件，但都结果无一例外，全部石沉大海

结果就是，没有办法了，想看看是不是只有预览和体验版有问题，后面发布到正式版后，再看居然没问题了，就是这么神奇，也是无语！！！！ 原来做了这么多无用功。。。。