1. 为什么会存在 pageMeta 属性

uniapp 新增这个属性是源于 微信基础库从 2.9.0 开始，新增了 page-meta 组件。可以用于配置指定页面的属性和监听事件等操作，从某种程度上来说，是替代了 pages.json 的功能.

可以让页面的配置和页面内容代码写在一个 vue 文件中。它还可以实现通过变量绑定来控制页面配置。但它的性能不如 pages.json 的配置，在新页面加载时，渲染速度还是 pages.json 方式的写法更快。

2. 基础属性

属性	类型	默认值	必填	说明
root-font-size	string	''	否	页面的根字体大小，页面中的所有 rem 单位，将使用这个字体大小作为参考值，即 1rem 等于这个字体大小
page-style	string	''	否	页面根节点样式，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点
background-color	string	''	否	窗口的背景色，必须为十六进制颜色值
@scroll	eventhandle		否	页面滚动时会触发 scroll 事件， event.detail =

更对属性和方法，请点击跳转官网 (opens new window)

3. 应用场景

全局实现字体大小切换

页面需要改变字体大小的地方，需要采用 rem 单位，然后根据修改 root 跟字体大小来改变值.

getApp().globalData 可以查询全局变量信息

        const currentFontSize = '12px'
        getRootFontSize(){
            let fontSize = getApp().globalData.rootFontSize;
            if(fontSize){
                this.currentFontSize = fontSize;
            }else{
                fontSize = uni.getStorageSync('root_font_size');
                if(fontSize){
                    getApp().globalData.rootFontSize=fontSize;
                }else{
                    fontSize='12px';
                    this.setRootFontSize(fontSize);
                }
                this.currentFontSize =  fontSize;
            }
			return this.currentFontSize
        }
        
        setRootFontSize(fontSize){
            uni.setStorageSync('root_font_size',fontSize);
            getApp().globalData.rootFontSize = fontSize;
        }

上述定义的方法，可以因 mixin 混入的形式导入，或者以 class 类的 extends 基层来导入.

在需要定义的页面 导入 以下代码:

<page-meta :root-font-size="currentFontSize" :page-style="computedColor"></page-meta>

如果采用 类继承 方式导入的话，则还需要加入以下代码:

  import fontSizeChange from "@/utils/fontSizeChange.js"
	export default{
		extends: fontSizeChange,
		data(){
			return {}
		},
	}

全局改变主题色

微信修改全局主题色有两种形式：跟随系统 / 手动选择主题色

• 跟随系统：可以通过 @media (prefers-color-scheme: dark/light){} 媒体查询来设置相对应的颜色
• 手动选择：则可以通过在 页面跟元素添加 类名 比如: <view class="dark">

<script>
  export default {
    computedColor(){
      let getModel = this.getModelType() // 从缓存取最新主题类型 auto / dark / light
      let currentPage = getCurrentPages(); // 获取当前页面信息
      // 排除不设置 主题色的页面
      let isModelStylePage = currentPage.some(v=>v.route === 'pages/mine/components/modelStyle')
      // 排除不设置 tabBar 的页面
      let isNoTabBarPage = currentPage.some(v=>(v.route.includes('pagesdetail') || (v.route === 'pages/question/index')))
      if(getModel === 'dark'){
        this.currentBackgroundColor = 'background-color:#191919;color:#ffffff'
        if(!isModelStylePage){
          uni.setNavigationBarColor({
            frontColor:'#ffffff',
            backgroundColor:'#1f1f1f',
            animation: {
              duration: 0,
              timingFunc: 'easeIn'
            }
          })
          if(!isNoTabBarPage){
            uni.setTabBarStyle({
              color:"#cccccc",
              selectedColor:"#009282",
              backgroundColor:'#1f1f1f'
              // borderStyle:"#ffffff"
            })
          }

        }
      }else if(getModel === 'light'){
        this.currentBackgroundColor = 'background-color:#ffffff;color:#000000'
        if(!isModelStylePage){
          uni.setNavigationBarColor({
            frontColor:'#000000',
            backgroundColor:'#ffffff',
            animation: {
              duration: 0,
              timingFunc: 'easeIn'
            }
          })
          if(!isNoTabBarPage){
            uni.setTabBarStyle({
              color:"#000000",
              selectedColor:"#009282",
              backgroundColor:'#ffffff'
              // borderStyle:"#000000"
            })
          }
        }
      }else{
        this.currentBackgroundColor = ''
      }

      return this.currentBackgroundColor
    }
  }
</script>

提示

当主题色放生变化的时候，会触发 onThemeChange 钩子函数，可以在 getSystemInfo() 的回调函数中拿到具体信息

		onThemeChange() {
			uni.getSystemInfo().then(res=>{
				this.setModelType(res.theme)
			})
		}