微信小程序折叠屏兼容

原创

iwhao

发布于 2024-07-27 10:35:53

610

发布于 2024-07-27 10:35:53

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

查看了微信官网

大屏适配

响应显示区域变化

启用大屏模式

从小程序基础库版本 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': {}
  }
}