uniapp全局方法样式使用

全局方法使用

（version:0.0.1版本）这里我选择的是采用vue2结合vue3的挂载方式getCurrentInstance()中的proxy方法

🔺 注册全局方法

//引入 
import config from '@/utils/config';

//挂载
Vue.prototype.$config=config;
app.config.globalProperties.$config = config;

🔺 全局方法使用

$config

🔺挂载vue2

Vue.prototype.$config = config;

👉vue2测试和使用

<template>
	<div></div>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		mounted() {
		  console.log(this.$config)  // 获取全局配置
		}
	}
</script>

👉输出的结果

// 输出的结果
{
    baseURL: "http://127.0.0.1:8888",
    webname: "社区"
    ...
    __proto__: Object
}

🔺挂载vue3

app.config.globalProperties.$config = config;

👉vue3输出报错

ReferenceError: $config is not defined

👉原因

在vue3之中我们需要官方提供给我们的proxy方法，来获取全局变量

<template>
	<div></div>
</template>
<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
console.log('版本号:', proxy.$config)
</script>

👉输出的结果

{
    baseURL: "http://127.0.0.1:8888",
    webname: "社区"
    ...
}

🔺挂载到uni全局对象

// main.js
uni.$config = {   // 直接挂载到 uni 对象
  apiUrl: 'https://XXX.com',
  version: '1.0.0'
}

👉使用

<script setup>
// 无需任何引入，直接使用
console.log(uni.$config.apiUrl)  
// 输出: https://XXX.com
</script>

全局样式

👉自定义全局原子化样式

接下来我们建立一个公共样式文件夹，这个文件夹存储所有的css样式 根目录下面新建一个styles文件夹，下面新建立一个文件uniapp.css 在我们的根目录uni.scss下面引入

@import '/static/styles/uniapp.css'; //注意路径是否正确

尝试一下

 .mgttop20{
  margin-top: 40rpx;
}

错误处理

这里我们运行一下以后发现一直报错，我们移除uni.scss之中的样式，然后在页面之中单独引入

  @import '@/common/common.css'; //注意路径是否正确

使用可以发现，写的公共样式已经生效了！