uniapp user set font size

There is currently no perfect solution

1. First create a new function js file 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. Create a new user-controlled size interface, here is the slider component of 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. Add code block content to the page you want to modify. The trouble is that you need to add each page and then change the unit. My understanding is that the root byte size of page-mate is changed to 14px, so the unit needs to be changed to rem. 1rem=14px, so the font size is not very accurate

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

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

.fontchange{
		font-size: 1rem;
	}