uniapp中控制全局字体大小的方式

应用场景

在用uniapp开发项目的时候，不同的用户有时候对字体的大小有着不一样的需求，所以我们开发了一个功能，用于控制全局的字体大小。

开发环境

这个项目是依据dcloud官方提供的方式创建的项目
npx degit dcloudio/uni-preset-vue#vite uniapp-vite
下面简单列一下开发环境：
1.vite 4.3.5，这个vite的版本是dcloud适应的版本；
2.vue 3.3.11，这个vue的版本是dcloud适应的版本；
3.pinia 2.0.27,这个pinia的版本不能用最新的，否则会报错（uniapp依赖的vue版本与最新的pinia版本不兼容），也是踩了坑，选择了该版本

功能实现的依据

这个功能实现是基于多个方面，1.是pinia这个状态管理工具，2.是新的特性（动态css）3.是provide与inject。
效果图：

项目目录结构如下：

话不多说，我直接上代码
1.index.vue

<template>
  <view class="content">
    <image class="logo" src="/static/logo.png"></image>
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <mp-html :content="html"></mp-html>
    <view class="size-btn">
      <button @click="setFontSize('10rpx')">10</button>
      <button @click="setFontSize('50rpx')">50</button>
      <button @click="setFontSize('100rpx')">100</button>
      <button @click="setFontSize('150rpx')">150</button>
    </view>
    <p>字体大小选择</p>
  </view>
</template>

<script setup>
import {ref,inject,nextTick,watch} from 'vue'
const title = ref('hello uni!')
const html = ref('<div>Hello mp-html</html>')
const {fontSize,defineFontSizeSelf} = inject('globalConfig')


watch(fontSize,()=>{
  console.log('effect fontSize',fontSize.value)
})
const setFontSize = (size) => {
    defineFontSizeSelf(size)
}
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: v-bind(fontSize);
  .size-btn{
    display: flex;
  }
  .logo {
    height: 200rpx;
    width: 200rpx;
    margin: 200rpx auto 50rpx;
  }

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

  .title {
    color: #8f8f94;
  }
}


</style>

2.app.vue

<script setup>
import {onLaunch} from '@dcloudio/uni-app'
import {storeToRefs} from 'pinia'
import {provide} from 'vue'
import {useGlobalPinia} from '@/pinia/globalConfig/global.pinia'
const globalPinia = useGlobalPinia()
const {fontSize} = storeToRefs(globalPinia)
provide("globalConfig",{
  fontSize,
  defineFontSizeSelf:globalPinia.defineFontSizeSelf
})
// onLaunch(()=>{
//   console.log(import.meta.env)
//   console.log(fontSize.value)
// })
</script>

<style lang="scss">

</style>

3.global.pinia.js

import {defineStore} from "pinia";

export const useGlobalPinia = defineStore('global',{
    state(){
        return{
            fontSize:'100rpx'
        }
    },
    getters:{

    },
    actions:{
        defineFontSizeSelf(size){
            console.log(size)
            this.fontSize = size
        },
    },
})

上述代码看完，你也许发现了不便之处。就是想要改变字体大小非常的麻烦。你不仅每次都要通过inject获取store中的字体大小，还需要在css中通过v-bind将字体大小绑定过去。显得这个方式很鸡肋。可能还会影响到整个框架的性能。其实也不是没有想过其他的方式，但是失败了。本来想通过css的特性来解决问题

:root{
	--font-size: v-bind(fontSize)
}

某个页面中：
.class{
	font-size:var(--font-size)
}

这样的方式看上去是不是更加优雅？但是这个方式行不通，浏览器无法识别定义的参数，我失败了，然而我又很懒，不想去想其他的方式，就暂时先用状态管理器控制全局字体的方式去解决字体大小控制这个问题。如果你有不错的想法，可以留言，我有时间看看，偷窃一下各位大佬的智慧