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

1.先言

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

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

适老化官方文档

2.提示

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

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

3.使用

打开终端，安装插件工具，构建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));

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

4.总结

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

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

我的哔哩哔哩空间
Gitee仓库地址：全部css、js特效源码
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~