uniapp 小程序环境变量配置和接口API封装

环境变量配置

1. 我们通过uni.getAccountInfoSync()获取小程序相关信息
   miniProgram 结构:
   • appId：小程序appid
   • envVersion： 小程序 当前环境版本：develop开发版、trial体验版、release正式版、gray灰度版（仅支付宝小程序支持）可以通过这个属性判断小程序不同的环境
     官方文档

let miniProgram  = uni.getAccountInfoSync().miniProgram // 小程序帐号信息

2. 在api 文件夹内创建config.js

export default {
	//接口请求域名配置
	api: function() {
		let curVersion = uni.getAccountInfoSync().miniProgram.envVersion;
		switch (curVersion) {
			case "develop": //开发版
				return "开发域名";
			case 'trial': //体验版
				return "测试域名"
			case 'release': //正式版
				return "生产域名"
			default: //其他,默认调用正式版
				return "其他域名"
		}
	}
}

3. 在api文件夹下创建 request.js 文件，并引用 config.js

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

5. 在具体的业务接口内使用

import  request  from './request';

// 请求
export function getInfo(parms) {
  return request(
    '接口路径',
    'post',
    parms
  );
}