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

Posted 北极光之夜。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序系列:五小程序适老化自动适配工具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总结笔记
…等等
进我主页看更多~

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

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

干货 | 30+条业务线,携程微信小程序如何协同开发

微信小程序 封装路由 mini-router

微信小程序添加闹钟代码

微信小程序:兼容iPhone X系列,适配安全区

微信小程序:兼容iPhone X系列,适配安全区