uniapp实现全局设置字体大小(字体大小切换)

效果图

实现步骤

1.安装配置postcss-px-to-viewpor

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

2.根目录下创建一个 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插件，实现px转rem，文档：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
    // 以下配置，可以将px转换为rem，如果要调整比例，可以调整 viewportWidth 来实现
    'postcss-px-to-viewport': {
      unitToConvert: 'rpx', // 需要转换的单位。我这里是rpx，如果你的项目都是用的px，就改成px
      viewportWidth: 750,// 密度，一般为750 || 375。这里可以自己修改
      unitPrecision: 2,
      propList: ['font-size'],
      // viewportUnit: "rem", // 指定需要转换成的视窗单位，默认vw
      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,把设置得字体大小数据放到缓存里

uni.setStorageSync("fontSize", this.fontValue)

4利用滑块，设置font-size的值。点击确定后，要把所设置的值写入缓存里

<template>
    <page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
    <view class="content">
        <view>
            <view class="fontchange">文字大小</view>
        </view>
        <view style="width:100%;padding: 0 10px;">
            <slider
                :min="3"
                :max="5"
                :value="fontValue"
                @change="sliderChange"
                :step="0.5"
            />
            <view class="change-fontsize-box">
                <text style="font-size: 12px;">
                    最小
                </text>
                <text style="font-size: 14px;">
                    标准
                </text>
                <text style="font-size: 16px;">
                    最大
                </text>
            </view>
        </view>
        <view style="padding: 20px 10px;width: 100%;">
            <u-button type="primary" @click="submit">确定</u-button>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            fontValue: 4,
        };
    },
    onShow() {
        uni.getStorageSync('fontSize')?this.fontValue=uni.getStorageSync('fontSize'):this.fontValue=4
    },
    methods: {
        sliderChange(e) {
            this.fontValue = e.detail.value;
        },
        submit() {
            uni.setStorageSync("fontSize", this.fontValue);
            uni.showToast({
                title: '设置成功',
                icon:'none',
                duration: 1500
            });
            console.log(uni.getStorageSync('fontSize'));
        },
    },
};
</script>
<style>
.fontchange {
    font-size: 26rpx;
    margin: 20px 0;
}
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}
.change-fontsize-box{
    margin: 10px 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
</style>

5.在需要用到的页面加上page-meta。如果是全局修改，就需要全部页面都加上这

<template>

    <page-meta :page-font-size="vuex_fontsize+'px'" :root-font-size="vuex_fontsize+'px'"></page-meta>

    <view>

        ...

    </view>

</template>