【前端开发】老年模式：字体大小设置

1. 导入插件：npm install postcss-px-to-viewport--save-dev

postcss-px-to-viewport：将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件

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插件，实现rpx转rem，文档：https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
// 以下配置，可以将rpx转换为rem，如果要调整比例，可以调整 viewportWidth 来实现
“postcss-px-to-viewport”: {
unitToConvert: “px”, // 需要转换的单位，默认px
viewportWidth: 750, // 密度，一般为750 || 375
unitPrecision: 5, // 单位转换后保留的精度
propList: [“font-size”], //要转换的属性，*号代表所有rpx的属性
viewportUnit: “rem”, // 指定需要转换成的视窗单位，默认vw
fontViewportUnit: “rem”, // 字体需要转成的单位，只针对 font-size 属性
selectorBlackList: [], // 需要忽略的CSS选择器
minPixelValue: 1, // 最小的转换数值，如果为1的话，只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值，而不添加备用属性
exclude: [], // 忽略某些文件夹下的文件或特定文件
include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 ‘src/mobile’ 下的文件 (include: //src/mobile//)
landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: “vw”, // 横屏时使用的单位
},
“@dcloudio/vue-cli-plugin-uni/packages/postcss”: {},
},
};

3. 封装全局变量：store.js

• 默认基准字体大小为 50px
• 先封装好“全局缓存变量”函数方法：
  export function setFontScale(fontScale) {
  return uni.setStorageSync($FontScaleKey, fontScale);
  }

import { createStore } from "vuex";

import login from "@/store/modules/login";
import schoolService from "@/store/modules/schoolService";
import attendance from "@/store/modules/attendance";
import { setFontScale } from "../common/auth";

const store = createStore({
  state: {
    // 默认基准字体大小(px)
    $baseFontSize: 50,
    //文字缩放倍数
    $fontScale: 1,
  },
  getters: {
    //获取基准字体大小
    getBaseFontSize: (state) => {
      return state.$baseFontSize;
    },
    //获得字体缩放倍数
    getFontScale: (state) => {
      return state.$fontScale;
    },
    //获取缩放字体大小
    getScaleFontSize: (state) => {
      return state.$fontScale * $baseFontSize;
    },
  },
  mutations: {
    SET_FONT_SCALE: (state, scale) => {
      state.$fontScale = scale;
      setFontScale(scale);
    },
  },
  modules: {
    login,
    schoolService,
    attendance,
  },
});

export default store;

4. 封装页面组件：settingFontSize.vue

应用技术：Uniapp + Vue3 + Sass

<template>
	<page-meta :root-font-size="`${baseFontSize}px`"></page-meta>
	<view id="font-scale">
		<view class="text-container" style="font-size:30rpx">拖动滑块以设置字体大小</view>

		<view class="slider-label-container">
			<view class="label-text label-standard">标准</view>
			<view class="label-text label-medium">中等</view>
			<view class="label-text label-larger">较大</view>
			<view class="label-text label-outsize">特大</view>
		</view>
		<view class="slider-container">
			<slider min="1.0" max="1.75" :value="data.fontScale" @change="sliderChange" show-value step="0.25" />
		</view>
		<view class="text-container label-standard">标准字体大小：</view>
		<view class="text-container label-standard">
			人生就像大海中的一叶扁舟，漂浮不定，当你发现自己逆风而行的时候，不要埋怨上天不公，
			而要偏转一下你的航向，逆风就会成为顺风。因为生活的起点并不是那么重要，重要的是最后你抵达了哪里。
		</view>
		<view class="text-container" :style="{ fontSize: `${32 * data.fontScale}rpx` }">预览字体大小：</view>
		<view class="text-container preview-text" :style="{ fontSize: `${32 * data.fontScale}rpx` }">
			人生就像大海中的一叶扁舟，漂浮不定，当你发现自己逆风而行的时候，不要埋怨上天不公，
			而要偏转一下你的航向，逆风就会成为顺风。因为生活的起点并不是那么重要，重要的是最后你抵达了哪里。
		</view>

		<view class="btn-container" @click="onBtnFinishedClicked()">
			<view class="btn-confirm label-medium" hover-class="btn-press" hover-stay-time="250">完成</view>
		</view>
	</view>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { useStore } from 'vuex'
import { getFontScale } from '../../common/auth';

const { proxy } = getCurrentInstance()
const store = useStore()

const data = ref({
	baseFontSize: 0,
	fontScale: 1.0,
});

const baseFontSize = computed(() => {
	const scale = getFontScale() || 1.0;
	return scale * data.value.baseFontSize;
});

const sliderChange = (e) => {
	data.value.fontScale = e.detail.value;
}
const onBtnFinishedClicked = () => {
	//如果修改了字体大小，则需要重新加载所有页面（因为已经加载的页面字体大小不会修改）
	proxy.$modal.confirm("确定修改字体大小？").then(res => {
		if (res) {
			store.commit('SET_FONT_SCALE', data.value.fontScale);
			// 使用uni.reLaunch跳转到某个页面，并关闭所有页面
			proxy.$tab.reLaunch("/pages/mine/personalCenter");
		}
	})
}

onLoad((options) => {
	// data.value.fontScale = store.getters.getFontScale;
	data.value.baseFontSize = store.getters.getBaseFontSize;
	data.value.fontScale = getFontScale()
	if (!data.value.fontScale) {
		data.value.fontScale = 1.0;
	}
})

</script>
<style lang="scss" scoped>
#font-scale {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-color: $color-background;
	padding-top: 24rpx;

	.slider-label-container {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		padding: 16rpx 32rpx 0;

		.label-text {
			display: flex;
			align-items: center;
			flex: 1;
		}
	}

	.slider-container {
		padding: 0 32rpx 24rpx;
	}

	.text-container {
		padding: 12rpx 32rpx;
	}

	.btn-container {
		width: 100%;
		padding: 24rpx 32rpx 32rpx;
		box-sizing: border-box;

		.btn-confirm {
			width: 100%;
			height: 0.8rem;
			display: block;
			border-radius: 0.2rem;
			background: #0091ff;
			color: #fff;
			font-size: 0.38rem;
			text-align: center;
			line-height: 0.8rem;
		}
	}

	.label-standard {
		font-size: 32rpx;
	}

	.label-medium {
		font-size: 36rpx;
	}

	.label-larger {
		font-size: 40rpx;
	}

	.label-outsize {
		font-size: 45rpx;
	}
}
</style>

5. 项目入口文件加载：App.vue

<script>
import config from '@/common/config'
import { getFontScale } from './common/auth';
export default {
	onLaunch: function () {
		this.initApp()
	},
	methods: {
		// 初始化应用
		initApp() {
			// 初始化应用配置
			this.initConfig()
			// 初始化全局字体大小
			this.initFontSize()
			// 检查用户登录状态
			this.checkLogin()
		},
		initFontSize() {
			let fontsize = getFontScale() || 1.0
			console.log(fontsize);

			if (fontsize) {
				this.$store.commit('SET_FONT_SCALE', fontsize);
			}
		},
		initConfig() {
			this.globalData.config = config
		},
		checkLogin() {
		}
	},
}
</script>

6. 在需要配置的组件页面中添加： < page-meta >

<template>
	<page-meta :root-font-size="`${baseFontSize}px`"></page-meta>
	<view class="wrapper">
	</view>
</template>