开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，查看详情

需求：考虑到此小程序用户的年龄大多是老年人，因此有一个需求是可随意调整整个小程序的字体大小。需求如下:

开发过程中遇到的问题: 1. 毫无头绪,根本不知网上说的跟节点是什么意思 2. 为什么一些字体大小不变

经过研究后, 了解了页面属性节点:查看详情

1. 字体大小页面 html 部分代码

左右滑动的样式引用了uview的 查看详情

<template>
	<page-meta :root-font-size="size"></page-meta>
	<view>
		<view class="fontSizeTitle">
			拖动下面滑块，可设置字体大小，设置后会改变整个系统的字体大小，如果在使用过
			程中存在问题可在个人中心反馈。
		</view>
		<view class="fontSizeSet">
			<view class="thereA">
				<text class="smallA">
					A
				</text>
				<text class="bigA">
					A
				</text>
			</view>
			<view class="sliderBox">
				<u-slider step="20" @end="getValue(value)" v-model="value" height="3" inactive-color="#DFDFDF"
					active-color="#DFDFDF" block-width="60" class="slider">
				</u-slider>
				<view class="line"></view>
				<view class="line twoLine"></view>
				<view class="line thereLine"></view>
				<view class="line fourLine"></view>
			</view>
		</view>
	</view>
</template>

2.字体大小页面 js部分代码

<script>
	import {
		getFoodUser,
		setSize
	} from '@/utils/token.js';
	import {
		modifyFontSize
	} from '@/request/api/common/my.js';
	export default {
		data() {
			return {
				value: 0,
				size: ''
			}
		},
		onLoad() {
			this.size = getApp().globalData.size
			switch (this.size) {
				case '14px':
					this.value = 0
					break;
				case '15px':
					this.value = 20
					break;
				case '16px':
					this.value = 40
					break;
				case '17px':
					this.value = 60
					break;
				case '18px':
					this.value = 80
					break;
				case '19px':
					this.value = 100
					break;
			}
		},
		methods: {
			getValue(e) {
				var that = this
				switch (e) {
					case 0:
						this.size = '14px'
						getApp().globalData.size = '14px'
						this.setFontSize(this.size)
						break;
					case 20:
						this.size = '15px'
						getApp().globalData.size = '15px'
						this.setFontSize(this.size)
						break;
					case 40:
						this.size = '16px'
						getApp().globalData.size = '16px'
						this.setFontSize(this.size)
						break;
					case 60:
						this.size = '17px'
						getApp().globalData.size = '17px'
						this.setFontSize(this.size)
						break;
					case 80:
						this.size = '18px'
						getApp().globalData.size = '18px'
						this.setFontSize(this.size)
						break;
					case 100:
						this.size = '19px'
						getApp().globalData.size = '19px'
						this.setFontSize(this.size)
						break;
				}
			},
			setFontSize(fontSize) {
				modifyFontSize({
						fid: getFoodUser().userId,
						fontSize: fontSize
					})
					.then(res => {
						setSize(this.size)
						uni.showToast({
							title: '操作成功',
							icon: 'success'
						})
					});
			}
		}
	}
</script>

3.字体大小页面 css 部分代码

page {
		background-color: #f8f8f8;
	}

	.fontSizeTitle {
		padding: 0 84rpx;
		margin-top: 80rpx;
		font-size: 1rem;
	}

	.fontSizeSet {
		width: 100%;
		height: 340rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.thereA {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.sliderBox {
		height: 60rpx;
		border-left: 3rpx solid #DFDFDF;
		border-right: 3rpx solid #DFDFDF;
		padding-top: 30rpx;
		position: relative;
	}

	.line {
		position: absolute;
		height: 40rpx;
		width: 3rpx;
		background-color: #DFDFDF;
		left: 20%;
		top: 13rpx;
		z-index: -1;
	}

	.twoLine {
		left: 40%;
	}

	.thereLine {
		left: 60%;
	}

	.fourLine {
		left: 80%;
	}


	.u-slider__button.data-v-c7a63ef2 {
		box-shadow: 0px 0px 24rpx 6rpx #EEEEEE !important;
	}


	.smallA {
		font-size: 36rpx;
	}

	.bigA {
		font-size: 60rpx;
	}

4.其他各个页面的html 和 js部分

注意: css不能设置字体大小,如果设置了,那文字不能根据字体大小页面所设置的rpx变化而变化

<template>
	<page-meta :root-font-size="size"></page-meta>
  </template>
  
  
	export default {
		data() {
			return {
				size: '',
			}
		},
		onLoad() {
			this.size = getApp().globalData.size
		}
	}

5.app.vue文件的js部分

import {
		getSize
	} from '@/utils/token.js';
	export default {
		onLaunch: function() {
			
			this.globalData.size = getSize() || '19px'
		},
		
	}