uniapp设置字体大小，老年模式

两种可行性方案

第一种方法

1.设置字体调节页面

image.png

可以放大或者缩小目前字号的倍数，通过silder调节，vuex存储
2.写一个scaleFontSize()方法，传入当前字号，获取要调节的倍数，例如当前字号24，通过设置需要调节1.5倍，最后字号就是24*1.5=36号字体

image.png image.png

方法可以mixin混入，每个界面都可以调用，这是群里一个大佬@码农系列的想法，灵感来自于i18n多语言切换，亲测可用。写此贴时已征得本人同意。在没有找到解决办法之前，这也不失为一个理想的解决方案，不过比较麻烦的是每一个引用字体的地方都要加上初始化的字体大小，还要考虑到input的placeholder等。

:style="{fontSize:scaleFontSize(24)}"

---

对于一个已经上线并且多达上百个页面的项目来说，这样的工作量实在太大，那么救命的第二个方法来了。

第二种方法：引用插件，将项目中的字体单位rpx换成rem，结合官网提供的page-meta属性，通过控制根字体大小，达到调节字体大小要求。

原贴地址

1.安装第三方插件postcss-px-to-viewport

npm install postcss-px-to-viewport --save-dev

2.项目根目录创建postcss.config.js，并写入配置：

// postcss.config.js

const path = require('path')
module.exports = {
  parser: 'postcss-comment',
  plugins: {
    'postcss-import': {
      resolve(id, basedir, importOptions) {
        if (id.startsWith('~@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
        } else if (id.startsWith('@/')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
        } else if (id.startsWith('/') && !id.startsWith('//')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
        }
        return id
      }
    },
    'autoprefixer': {
      overrideBrowserslist: ["Android >= 4", "ios >= 8"],
      remove: process.env.UNI_PLATFORM !== 'h5'
    },
    // 借助postcss-px-to-viewport插件，实现rpx转px，文档：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
    // 以下配置，可以将rpx转换为1/2的px，如20rpx=10px，如果要调整比例，可以调整 viewportWidth 来实现
    'postcss-px-to-viewport': {
      unitToConvert: 'rpx', // 需要转换的单位
      viewportWidth: 750,
      unitPrecision: 5,
      propList: ['*'],
      fontViewportUnit: 'rem', // 字体需要转成的单位，只针对 font-size 属性
      selectorBlackList: [],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: undefined,
      include: undefined,
      landscape: false
    },
    '@dcloudio/vue-cli-plugin-uni/packages/postcss': {}
  }
}

3.根据页面设置，vuex取出设置大小

image.png

<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt" style="margin-top: 50rpx;">
            <view class="titleBox">
                <view style="font-size:25rpx">小</view>
                <view style="font-size:30rpx">标准</view>
                <view style="font-size:35rpx">中</view>
                <view style="font-size:40rpx">大</view>
            </view>
            <view>
                <slider min="2.6" max="5.6" :value="fontValue" @change="sliderChange" show-value step="1"/>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                fontValue:3.6,
            }
        },
        onLoad() {
            this.fontValue = this.$store.state.scaleFontSize
        },
        methods: {
            sliderChange(e) {
                // console.log('value 发生变化：' + e.detail.value)
                this.$store.commit('setScaleFontSize',e.detail.value)
                console.log(this.$store.state.scaleFontSize)
                // 使用uni.reLaunch跳转到某个页面，并关闭所有页面
                uni.reLaunch({
                    url:"../login/login"
                })
            },
        }
    }
</script>
<style>
    .titleBox{
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 30upx 0;
        margin-left: 5%;
    }
    
</style>

4.在每个页面中通过添加page-meta调节，page-meta 配置项参考链接

<template>
    <page-meta :root-font-size="`${this.$store.state.scaleFontSize}px`"></page-meta>
    <view></view>
</template>

此种方法navbar和tabbar的字体大小不能改变。

---

其实uniapp的示例demo APP是可以跟随系统字体大小的变化而变化的，但是我不知道他们是怎么实现的。