ZYT/zyt

Fork 0

Files

T

Your Name 08dd9cd307 更新

2026-03-11 14:33:49 +08:00

5.2 KiB

Raw Blame History

全局属性使用说明

概述

小程序通过 main.js 中的 app.config.globalProperties 定义全局属性，包括 $url 和 apiUrl 方法。

全局属性定义

在 main.js 中

// Vue3 部分
export function createApp() {
  const app = createSSRApp(App)
  
  // 定义全局 baseUrl
  app.config.globalProperties.$url = baseUrl
  
  // 定义全局 apiUrl 方法
  app.config.globalProperties.apiUrl = apiUrl
  
  return {
    app
  }
}

全局属性列表

属性名	类型	说明
`$url`	string	API 基础 URL，默认值：`http://api.zzzhengyangtang.cn`
`apiUrl`	function	API 请求方法

在 API 服务中使用

获取全局属性

import { getCurrentInstance } from 'vue'

const getGlobalProperties = () => {
  try {
    const instance = getCurrentInstance()
    if (instance) {
      return instance.appContext.config.globalProperties
    }
  } catch (e) {
    console.warn('无法获取 getCurrentInstance')
  }
  return {}
}

// 使用
const globalProps = getGlobalProperties()
const baseUrl = globalProps.$url
const apiUrl = globalProps.apiUrl

在 request 函数中使用

export const request = (url, method = 'POST', data = {}, loading = true) => {
  // 获取全局属性
  const globalProps = getGlobalProperties()
  const apiUrl = globalProps.apiUrl
  const baseUrl = globalProps.$url || 'http://api.zzzhengyangtang.cn'
  
  if (!apiUrl) {
    // 降级方案：直接使用 uni.request
    return new Promise((resolve, reject) => {
      uni.request({
        url: `${baseUrl}${url}`,
        method,
        data,
        // ...
      })
    })
  }
  
  // 使用全局 apiUrl 方法
  return apiUrl({
    url,
    method,
    data,
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    }
  }, loading)
}

在组件中使用

方式1：通过 getCurrentInstance

<script setup>
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const baseUrl = instance.appContext.config.globalProperties.$url
const apiUrl = instance.appContext.config.globalProperties.apiUrl

console.log('Base URL:', baseUrl)
</script>

方式2：通过 this（Vue2 风格）

<script>
export default {
  methods: {
    getBaseUrl() {
      return this.$url
    },
    async fetchData() {
      const response = await this.apiUrl({
        url: '/api/data',
        method: 'GET'
      })
      console.log(response)
    }
  }
}
</script>

方式3：通过 inject（推荐）

<script setup>
import { inject } from 'vue'

// 在 main.js 中提供
// app.provide('$url', baseUrl)
// app.provide('apiUrl', apiUrl)

const baseUrl = inject('$url')
const apiUrl = inject('apiUrl')
</script>

修改全局属性

修改 baseUrl

编辑 TUICallKit-Vue3/main.js：

var baseUrl = 'http://your-api-domain/api'

修改 apiUrl 方法

编辑 TUICallKit-Vue3/main.js 中的 apiUrl 函数。

全局属性的生命周期

初始化：在 main.js 中通过 app.config.globalProperties 定义
可用：应用创建后，所有组件都可以访问
销毁：应用销毁时自动清理

最佳实践

1. 统一管理全局属性

在 main.js 中集中定义所有全局属性：

// 定义全局属性对象
const globalConfig = {
  $url: baseUrl,
  apiUrl: apiUrl,
  $appName: '医疗小程序',
  $version: '1.0.0'
}

// 批量注册
Object.keys(globalConfig).forEach(key => {
  app.config.globalProperties[key] = globalConfig[key]
})

2. 创建辅助函数

// utils/global.js
import { getCurrentInstance } from 'vue'

export const useGlobal = () => {
  const instance = getCurrentInstance()
  const globalProps = instance.appContext.config.globalProperties
  
  return {
    baseUrl: globalProps.$url,
    apiUrl: globalProps.apiUrl,
    appName: globalProps.$appName,
    version: globalProps.$version
  }
}

3. 在组件中使用

<script setup>
import { useGlobal } from '@/utils/global'

const { baseUrl, apiUrl } = useGlobal()

console.log('Base URL:', baseUrl)
</script>

常见问题

Q: 如何在非组件中使用全局属性？

A: 在 API 服务中使用 getCurrentInstance() 获取全局属性。

Q: 如何动态修改全局属性？

A: 直接修改 app.config.globalProperties 中的值：

const instance = getCurrentInstance()
instance.appContext.config.globalProperties.$url = 'http://new-url'

Q: 全局属性和 provide/inject 的区别？

全局属性：所有组件都可以访问，通过 this.$property 或 getCurrentInstance() 获取
provide/inject：父组件提供，子组件注入，更灵活但需要显式提供

Q: 如何在 Composition API 中使用全局属性？

A: 使用 getCurrentInstance() 获取实例，然后访问 appContext.config.globalProperties。

总结

通过 app.config.globalProperties 定义的全局属性可以在整个应用中访问，是管理全局配置和方法的最佳方式。

5.2 KiB Raw Blame History Unescape Escape