【微信小程序系列：五】小程序适老化自动适配工具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

在这里插入图片描述

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

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

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

在这里插入图片描述

相关阅读:
Istio1.12：安装和快速入门
go: no such tool “compile“(一次糟糕体验)
Problem A: 检查数中重复的数字
子类到底能不能继承父类的私有属性？
单图像超分辨率重建总结
哪些场景会产生OOM？
Python——基础知识
PeopleSoft概述及开发工具（application desinger）介绍
郑州团购分销小程序开发如何运营？
基于NUXT.JS搭建一款VUE版SSR前端框架（解决SPA应用的SEO优化优化问题）

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