251 lines
5.2 KiB
Markdown
251 lines
5.2 KiB
Markdown
# 全局属性使用说明
|
||
|
||
## 概述
|
||
|
||
小程序通过 `main.js` 中的 `app.config.globalProperties` 定义全局属性，包括 `$url` 和 `apiUrl` 方法。
|
||
|
||
## 全局属性定义
|
||
|
||
### 在 main.js 中
|
||
|
||
```javascript
|
||
// 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 服务中使用
|
||
|
||
### 获取全局属性
|
||
|
||
```javascript
|
||
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 函数中使用
|
||
|
||
```javascript
|
||
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
|
||
|
||
```vue
|
||
<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 风格）
|
||
|
||
```vue
|
||
<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（推荐）
|
||
|
||
```vue
|
||
<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`：
|
||
|
||
```javascript
|
||
var baseUrl = 'http://your-api-domain/api'
|
||
```
|
||
|
||
### 修改 apiUrl 方法
|
||
|
||
编辑 `TUICallKit-Vue3/main.js` 中的 `apiUrl` 函数。
|
||
|
||
## 全局属性的生命周期
|
||
|
||
1. **初始化**：在 `main.js` 中通过 `app.config.globalProperties` 定义
|
||
2. **可用**：应用创建后，所有组件都可以访问
|
||
3. **销毁**：应用销毁时自动清理
|
||
|
||
## 最佳实践
|
||
|
||
### 1. 统一管理全局属性
|
||
|
||
在 `main.js` 中集中定义所有全局属性：
|
||
|
||
```javascript
|
||
// 定义全局属性对象
|
||
const globalConfig = {
|
||
$url: baseUrl,
|
||
apiUrl: apiUrl,
|
||
$appName: '医疗小程序',
|
||
$version: '1.0.0'
|
||
}
|
||
|
||
// 批量注册
|
||
Object.keys(globalConfig).forEach(key => {
|
||
app.config.globalProperties[key] = globalConfig[key]
|
||
})
|
||
```
|
||
|
||
### 2. 创建辅助函数
|
||
|
||
```javascript
|
||
// 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. 在组件中使用
|
||
|
||
```vue
|
||
<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` 中的值：
|
||
|
||
```javascript
|
||
const instance = getCurrentInstance()
|
||
instance.appContext.config.globalProperties.$url = 'http://new-url'
|
||
```
|
||
|
||
### Q: 全局属性和 provide/inject 的区别？
|
||
|
||
A:
|
||
- 全局属性：所有组件都可以访问，通过 `this.$property` 或 `getCurrentInstance()` 获取
|
||
- provide/inject：父组件提供，子组件注入，更灵活但需要显式提供
|
||
|
||
### Q: 如何在 Composition API 中使用全局属性？
|
||
|
||
A: 使用 `getCurrentInstance()` 获取实例，然后访问 `appContext.config.globalProperties`。
|
||
|
||
## 相关文件
|
||
|
||
- 全局配置: `TUICallKit-Vue3/main.js`
|
||
- API 服务: `TUICallKit-Vue3/utils/api.js`
|
||
- 全局工具: `TUICallKit-Vue3/utils/global.js`（可选）
|
||
|
||
## 总结
|
||
|
||
通过 `app.config.globalProperties` 定义的全局属性可以在整个应用中访问，是管理全局配置和方法的最佳方式。
|