【微信小程序系列：五】小程序适老化自动适配工具miniprogram-elder-transform---微信老年关怀模式下小程序字体适配微信字体

这个工具我网上基本找不到任何一篇文章说这个miniprogram-elder-transform的使用的，==，既然没有，那咱就自己写第一篇~

Android字体大小标准默认16px，iOS字体大小标准默认17px。
个人觉得，微信用户设置字体大小超过或等于22px，小程序就可以进行老年化适配。
在这里插入图片描述

在这里插入图片描述

获取微信用户字体大小方法。获取后可以进行一些自己的操作。

wx.getSystemInfo({
      success (res) {
        console.log('用户字体大小（单位px）',res.fontSizeSetting)
      }
    })
1
2
3
4
5

打开终端，安装插件工具，构建npm。工具GitHub地址

npx miniprogram-elder-transform .
1

此时发现主包代码内的wxml文件开头都会加上了标签 （注意：若代码存在主包和分包，工具只对主包的wxml文件生效）：

<page-meta root-font-size="system"/>
1

root-font-size：页面的根字体大小，页面中的所有 rem 单位，将使用这个字体大小作为参考值，即 1rem 等于这个字体大小；自小程序版本 2.11.0 起，也可以设置为 system。page-meta标签解释。

主包和分包的wxss文件设置的字体和部分图标图片啥的宽高也都变成了calc的计算公式放大了倍率。比如：

font-size: calc(20rpx + 0.5 * (1rem - 16px));
1

在这里插入图片描述

需要注意的是，本适老化适配工具不能覆盖所有场景，经过本工具转换后仍需要进行测试和手动适配，以符合产品预期。（比如存在分包的话，分包还得手动适配。或者因为字体宽高改变导致布局乱了，也得手动代码调整。还有很多元素没转换等等）

使用感受：有用，能看到效果，节省大量时间，但是也有某些地方导致了布局混乱，或者没转换好，一大一小的。 总结，或许给老年化模式下重新设计写一套布局稳妥点。

对了，世界杯，又到喝酒看球的时间了~ 可惜疫情不知什么时候结束唉

在这里插入图片描述

相关阅读:
（附源码）计算机毕业设计SSM基于的校园失物招领平台
Python错误与异常
建筑可视化中的 3D 纹理
YGG 公会发展计划第 1 季总结
Python常用做题笔记
C++标准库分析总结(九)——＜仿函数＞
【计算机视觉 | 目标检测】arxiv 计算机视觉关于目标检测的学术速递（9 月 8 日论文合集）
CA：用于移动端的高效坐标注意力机制 | CVPR 2021
【Python Web】Flask框架（二）案例：用户注册,GET请求和POST请求提交表单
const和readonly的区别

原文地址：https://blog.csdn.net/luo1831251387/article/details/127744566