uniapp用户设置字体大小

目前感觉没有特别完美的解决方法

1.首先新建一个功能js文件fongbase.js

export default {
    created() {
        const self = this;
 
    },
    mounted() {
        const self = this;
    },
    methods: {
        //设置字体
        getRootFontSize(){
            const self = this;
            var fontSize = getApp().globalData.rootFontSize;
            if(fontSize){
                return fontSize;
            }else{
                fontSize = uni.getStorageSync('root_font_size');
                if(fontSize){
                    getApp().globalData.rootFontSize=fontSize;
                }else{
                    fontSize='12px';//默认字体大小
                    self.setRootFontSize(fontSize);
                }
                return fontSize;
            }
        },
        setRootFontSize(fontSize){
            uni.setStorageSync('root_font_size',fontSize);
            getApp().globalData.rootFontSize=fontSize;
        },
 
    }
}

2.新建一个用户控制大小的界面，这里用的是uniapp的滑块组件

<template>
    <page-meta :root-font-size="getRootFontSize()"></page-meta>
    <view class="content">
        <view class=""><view class="" style="font-size: 1rem;">文字大小</view></view>
        <view class="" style="width:100%;padding: 0 20rpx;">
            <slider
                style="width: 100%;"
                min="12"
                max="16"
                :value="fontValue"
                @change="sliderChange"
                show-value
                step="2"
            />
        </view>
        <u-button type="primary" @click="submit">确定</u-button>
    </view>
</template>

<script>
import fontbase from '@/utils/fontbase.js';
export default {
    extends: fontbase,
    data() {
        return {
            fontValue: 12
        };
    },
    onLoad() {},
    onShow() {
        let a = this.getRootFontSize();
        let aa = a.substring(0, 2);
        this.fontValue = Number(aa);
    },
    methods: {
        submit() {
            uni.reLaunch({
                url:'/pages/v2-dealers/my/index'
            })
            console.log('submit');
        },
        sliderChange(e) {
            console.log('value 发生变化：' + e.detail.value);
            const self = this;
            let nowFontSize = e.detail.value + 'px';
            console.log(nowFontSize);
            self.fontEnd = nowFontSize;
            console.log(nowFontSize);
            self.setRootFontSize(nowFontSize);
        }
    }
};
</script>

<style>
.fontchange {
    font-size: 1rem;
}
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

.logo {
    width: 100%;
    /* height: auto; */
    margin-top: 10px;
}

.text-area {
    display: flex;
    justify-content: center;
}

.title {
    font-size: 36rpx;
    color: #8f8f94;
}
</style>

3.在想要修改的页面加代码块内容，麻烦的就是需要一个个页面去添加，然后改单位，我的理解是page-mate的根字节大小改为了14px，那么单位要改为rem，1rem=14px，所以说这个字体大小感觉不是很精确

<page-meta  :root-font-size="getRootFontSize()"></page-meta>

    import fontbase from '@/utils/fontbase.js'
    export default {
        extends:fontbase,

.fontchange{
        font-size: 1rem;
    }