uniapp 自定义环境变量，接口API封装以及使用

1. 环境变量配置

1. 在package.json 中配置我们需要发布的不同站点，如果没有这个文件在根目录下创建这个文件，想要更多了解的可以去看官方文档

• 基础用法

  {
      /**
       * package.json其它原有配置 
       * 拷贝代码后请去掉注释！
       */
      "uni-app": {// 扩展配置
          "scripts": {
              "custom-platform": { //自定义编译平台配置，可通过cli方式调用
                  "title":"自定义扩展名称", // 在HBuilderX中会显示在 运行/发行 菜单中
                  "browser":"",  //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
                  "env": {//环境变量
                      "UNI_PLATFORM": "",  //基准平台
                      "MY_TEST": "", // ... 其他自定义环境变量
                   },
                  "define": { //自定义条件编译
                      "CUSTOM-CONST": true //自定义条件编译常量，建议为大写
                  }
              }
          }    
      }
  }
  
  

• 实际使用

  {
  	"uni-app": {
  		"scripts": {
  			"wx-test": {
  				"title": "微信小程序 测试环境",
  				"env": {
  					"UNI_PLATFORM": "mp-weixin",
  					"NAME_ER": "test"
  				}
  			},
  			"wx-prod": {
  				"title": "微信小程序 生产环境",
  				"env": {
  					"UNI_PLATFORM": "mp-weixin",
  					"NAME_ER": "production"
  				}
  			},
  			"h5-dev": {
  				"title": "H5 开发环境",
  				"browser": "chrome",
  				"env": {
  					"UNI_PLATFORM": "h5",
  					"NAME_ER": "development"
  				}
  			},
  			"h5-test": {
  				"title": "H5 测试环境",
  				"browser": "chrome",
  				"env": {
  					"UNI_PLATFORM": "h5",
  					"NAME_ER": "test"
  				}
  			},
  			"h5-prod": {
  				"title": "H5 生产环境",
  				"browser": "chrome",
  				"env": {
  					"UNI_PLATFORM": "h5",
  					"NAME_ER": "production"
  				}
  			}
  		}
  	}
  }
  

注意：

• package.json文件中不允许出现注释，否则扩展配置无效

• vue-cli需更新到最新版，HBuilderX需升级到 2.1.6+ 版本
  示例：钉钉小程序

• UNI_PLATFORM仅支持填写uni-app默认支持的基准平台，目前仅限如下枚举值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq

• browser 仅在UNI_PLATFORM为h5时有效,目前仅限如下枚举值：chrome、firefox、ie、edge、safari、hbuilderx

• 正确配置完之后，HBuilderX会根据package.json的扩展配置，在运行、发行菜单下，生成自定义菜单

2. 根据不同的平台去选择域名和其他参数

• 在根目录创建config文件夹，并在里面创建env.js文件填入以下代码

  
  // 不同的环境变量配置
  const development = {
  	requestBaseUrl: 'https://tea.qingnian8.com',
  	appid: '',
  }
  
  const test = {
  	requestBaseUrl: 'https://tea.qingnian8.com',
  	// #ifdef MP-WEIXIN
  	appid: 'wx0841754842d6ef36',
  	// #endif
  }
  
  const production = {
  	requestBaseUrl: 'https://tea.qingnian8.com',
  	// #ifdef MP-WEIXIN
  	appid: 'wx0841754842d6ef36',
  	// #endif
  }
  
  export default {
  	development,
  	test,
  	production
  }
  

• 因为在 vue3 中获取不到 process 所以我们在 vite.config.js 中添加全局变量以便于我们在全局使用

  import {
  	defineConfig
  } from 'vite';
  import uni from '@dcloudio/vite-plugin-uni';
  import configApi from './config/env.js';
  
  export default defineConfig({
  	plugins: [uni()],
  	define: {
  		'process.env.config': configApi,// 配置全局的环境变量值
  		'process.env': process.env,//
  	},
  });
  

2. 接口API封装

1. 在 utils 里面创建 request.js 并引入我们配置的环境变量

   import configApi from '@/config/env';
   console.log(configApi, '打印查看', process.env.NAME_ER)
   //使用时可以直接传参；需要写url：xxx等键值对传参
   const request = (config = {}) => {
   	let {
   		    url = '',
   			method = 'GET',
   			data = {},
   			header = {
   				//具体的header和后端商同后再编写
   				'content-type': method == 'POST' ? 'application/json;charset=UTF-8' : 'application/json',
   				Authorization: uni.getStorageSync('token') || ''
   			},
   			timeout = 30000,
   			dataType = "json",
   			successCb = null, // 成功回调
   			failCb = null, // 失败回调
   
   	} = config
   	let BaseUrl = configApi[process.env.NAME_ER].requestBaseUrl + url
   	return new Promise((resolve, reject) => {
   		uni.request({
   			url: BaseUrl, //接口地址：前缀+方法中传入的地址
   			method: method, //请求方法
   			data: data, //传递参数
   			header: header, //自定义头部，和后端商同后编写
   			timeout: timeout, // 请求超时时间
   			// 一般直接写dataType:‘json’，
   			dataType,
   			success: (res) => {
   				if (res.data.errCode === 0) {
   					// 需要成功回调时才调用
   					successCb && successCb(res.data.data);
   					resolve(res.data) //成功
   				} 
   				//注：这里对（实际以后端同事定好的为准）成功外的其他errCode需要额外写抛错提示
   				else if (res.data.errCode === 400) {
   					uni.showModal({
   						title: "错误提示",
   						content: res.data.message,
   						showCancel: false
   					})
   					reject(res.data)
   				}
   				else if (res.data.errCode == '500') { //自定请求失败的情况，这里以常见的errCode 500 为例
   					uni.showModal({
   						showCancel: false,
   						title: '温馨提示',
   						content: res.data.message,
   						success: function(result) {
   							if (result.confirm) {
   								uni.reLaunch({
   									url: '/pages/index/index' //这里需用绝对路径才可, 这里举例回到首页
   								});
   							}
   						}
   					});
   				} else {
   					uni.showToast({
   						title: res.data.message,
   						icon: "none"
   					})
   					reject(res.data)
   				}
   			},
   			// 这里的接口请求，如果出现问题就输出接口请求失败的message；
   			//注：请求失败统一设置抛错提示，后续具体组件中接口请求的catch中就不需要再写抛错提示了
   			fail: (err) => {
   				uni.showToast({
   					title: err.message,
   					icon: 'none'
   				});
   				reject(err)
   				failCb && failCb(err);
   			}
   		})
   	})
   }
   export default request;
   

2. 封装请求和响应拦截器，在 request.js 添加以下代码官方文档

// 请求拦截器

uni.addInterceptor('request', {
  invoke(args) {
    // request 触发前拼接 url
    console.log('请求前',args)
  },
  success(args) {
    // 请求成功后，修改code值为1
    console.log('请求后',args)
  },
  fail(err) {
    console.log('interceptor-fail',err)
  },
  complete(res) {
    console.log('interceptor-complete',res)
  }
})

uni.addInterceptor({
  returnValue(args) {
    // 只返回 data 字段
    return args.data
  }
})

3. 在api文件内编写接口：比如api.js

   import request from "@/utils/request.js"
   
   export function getData() {
   	return request({
   		url: "/api/banner"
   	})
   }
   

4. 页面中使用

   <script setup>
   
   	import {
   		onLoad
   	} from "@dcloudio/uni-app"
   	import {
   		getData
   	} from "@/api/user.js"
   	const getData = ()=>{
   		getData().then(res=>{
   			console.log(res,'返回结果');
   		})	
   	}
   	onLoad((e) => {
   		// console.log(configApi[process.env.ENV_NAME])
   		getData()
   	})
   </script>