当前位置：首页 > news >正文

《微信小程序》第六章：参数定义与管理

news 2025/10/28 7:46:26

系列文章

《微信小程序》https://blog.csdn.net/sen_shan/category_13069009.html

第五章：登录-API封装https://blog.csdn.net/sen_shan/article/details/153963486?spm=1011.2415.3001.5331

文章目录

系列文章

文章目录

前言

参数定义

请求修改

调试与测试

前言

本文介绍了微信小程序中参数统一管理的实现方案。核心内容包括：

1）通过src/config/index.ts文件实现多环境配置管理，自动区分开发/测试/生产环境；

2）实例request.ts中应用

参数定义

建立src/config/index.ts文件

// src/config/index.ts
type EnvFile = 'dev' | 'test' | 'prod'function getEnv(): EnvFile { // #ifdef H5const m = import.meta.env.MODE   // vite 环境变量if (m === 'production') return 'prod'if (m === 'test' || m === 'gray') return 'test'return 'dev'// #endif// #ifndef H5const v = uni.getAccountInfoSync().miniProgram.envVersionif (v === 'release') return 'prod'if (v === 'trial') return 'test'return 'dev'          // develop / experience// #endif
}/* 1. 与环境无关的常量 */
const COMMON = {TIMEOUT: 15000,PAGE_SIZE: 20,MAX_RETRY: 3,// 任意其他固定值
} as const/* 2. 与环境有关的差异配置 */
const ENV_CONFIG = {dev: {API_BASE_URL: 'http://127.0.0.1:8080',API_KEY: 'ae139f8f6a8efc2a74a1e852c5cdaa43',TRACK_URL: 'http://127.0.0.1:8080',ENABLE_VCONSOLE: true,},test: {API_BASE_URL: 'https://test-api.xxx.com',API_KEY: 'test-key-123456',TRACK_URL: 'https://test-track.xxx.com',ENABLE_VCONSOLE: true,},prod: {API_BASE_URL: 'https://api.xxx.com',API_KEY: 'prod-key-abcdef',TRACK_URL: 'https://track.xxx.com',ENABLE_VCONSOLE: false,},
} as const/* 3. 合并后一次性导出 */
export default {...COMMON,...ENV_CONFIG[getEnv()],
} as const

作用：

根据运行平台与构建环境自动选取对应的后端地址、密钥及功能开关，并统一导出只读常量供全局使用。

核心思路

1. 先判断平台
        H5：读取 Vite 注入的 import.meta.env.MODE
        小程序：读取微信/支付宝等宿主提供的 uni.getAccountInfoSync().miniProgram.envVersion
2. 再映射到 3 套环境
        dev | test | prod
3. 最后把「与环境无关的常量」+「当前环境变量」合并成单例导出

请求修改

修改src\utils\request.ts文件

import config from '@/src/config/index'
/* 配置 ------------------------------------------------------------------ */
const BASE_URL: string = config.API_BASE_URL //'http://8.130.11.167:8080'// 替换你的后端域名
const API_KEY: string = config.API_KEY
const TIMEOUT = config.TIMEOUT // ms

配置导入说明
1. 配置来源
代码中所有 BASE_URL / API_KEY / TIMEOUT 等常量均统一从 @/src/config/index 自动读取。
该文件会根据运行平台（H5 / 小程序）与构建环境（dev / test / prod）动态返回对应的域名、密钥及功能开关，业务层无需再写 if/else 判断环境。

若后台域名或密钥发生变更，只需修改 src/config/index.ts ，无需逐文件替换。

完整代码如下：

// 顶部引入
import { toastError } from './toast'
import config from '@/src/config/index'
/* 配置 ------------------------------------------------------------------ */
const BASE_URL: string = config.API_BASE_URL //'http://8.130.11.167:8080'// 替换你的后端域名
const API_KEY: string = config.API_KEY
const TIMEOUT = config.TIMEOUT // ms/* 类型定义 --------------------------------------------------------------- */
export type Method = 'GET' | 'POST' | 'PUT' | 'DELETE'export interface RequestOptions<T = any> {url: stringmethod?: Methoddata?: Theaders?: Record<string, string>noToken?: boolean // 跳过 tokennoBaseURL?: boolean // 跳过 baseURLtimeout?: number
}// 后端统一返回格式（按你的实际改）
export interface HttpResponse<T = any> {status_code: numberstatus:stringmessage: stringdata: T
}/* 核心请求 --------------------------------------------------------------- */
export function request<R = any>(options: RequestOptions): Promise<HttpResponse<R>> {console.log(BASE_URL)console.log(API_KEY)return new Promise((resolve, reject) => {const token = uni.getStorageSync('token')const header: AnyObject = {'Content-Type': 'application/json; charset=utf-8','x-api-key': API_KEY ,//'ae139f8f6a8efc2a74a1e852c5cdaa43',...options.headers,}if (!options.noToken && token) header.Authorization = `Bearer ${token}`uni.request({url: options.noBaseURL ? options.url : `${BASE_URL}${options.url}`,method: options.method || 'GET',data: options.data || {},header,timeout: options.timeout || TIMEOUT,success: (res) => handleSuccess<R>(res, resolve, reject),fail: (err) => handleFail(err, reject),})})
}/* 成功处理 --------------------------------------------------------------- */
function handleSuccess<R>(res: UniApp.RequestSuccessCallbackResult,resolve: (value: HttpResponse<R>) => void,reject: (reason?: any) => void,
) {const { statusCode, data } = res// 成功区间if (statusCode >= 200 && statusCode < 300) {const resp = data as HttpResponse<R>if (resp.status_code === 200) resolve(resp)else {toastError(resp.message)reject(resp)}return}// 401 登录态失效if (statusCode === 401) {const detail = (data as any)?.detail || '登录已过期'toastError(detail)uni.clearStorageSync()uni.reLaunch({ url: '/pages/login/index' })reject(new Error(detail))return}// 其他 4xx/5xxif (statusCode >= 300) {const detail = (data as any)?.detail || `请求失败(${statusCode})`toastError(detail)reject(new Error(detail))return}
}/* 失败处理 --------------------------------------------------------------- */
function handleFail(err: any, reject: (reason?: any) => void) {toastError('网络异常')reject(err)
}/* 上传文件 --------------------------------------------------------------- */
export function upload<R = any>(url: string,filePath: string,formData?: Record<string, any>,timeout = 30_000,
): Promise<R> {const token = uni.getStorageSync('token')return new Promise((resolve, reject) => {uni.uploadFile({url: `${BASE_URL}${url}`,filePath,name: 'file',formData,header: { Authorization: `Bearer ${token}` },timeout,success: (res) => {const data: HttpResponse<R> = JSON.parse(res.data)if (data.status_code === 0) resolve(data.data)else {uni.showToast({ title: data.message || '上传失败', icon: 'none' })reject(data)}},fail: reject,})})
}/* 导出别名（可选）-------------------------------------------------------- */
export const http = {get<R>(url: string, params?: any, returnData = true) {return request<R>({ url, data: params }).then(res =>returnData ? res.data : res)},post<R>(url: string, data?: any, returnData = true) {return request<R>({ url, method: 'POST', data }).then(res =>returnData ? res.data : res)},put<R>(url: string, data?: any, returnData = true) {return request<R>({ url, method: 'PUT', data }).then(res =>returnData ? res.data : res)},delete<R>(url: string, returnData = true) {return request<R>({ url, method: 'DELETE' }).then(res =>returnData ? res.data : res)}
}