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

Posted 2022-12-14 北极光之夜。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序系列：五小程序适老化自动适配工具miniprogram-elder-transform---微信老年关怀模式下小程序字体适配微信字体相关的知识，希望对你有一定的参考价值。

1.先言

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

android字体大小标准默认16px，ios字体大小标准默认17px。
个人觉得，微信用户设置字体大小超过或等于22px，小程序就可以进行老年化适配。

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

wx.getSystemInfo(
      success (res) 
        console.log('用户字体大小（单位px）',res.fontSizeSetting)
      
    )

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

npx miniprogram-elder-transform .

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

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

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

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

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

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

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

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

以上是关于微信小程序系列：五小程序适老化自动适配工具miniprogram-elder-transform---微信老年关怀模式下小程序字体适配微信字体的主要内容，如果未能解决你的问题，请参考以下文章