从开始的小程序开发~

1. 搭框架

2024/12/9

要做小程序了 技术选型用了 uni-app,因为要转H5涉及到了跨端.....

遇到什么问题在写上去吧

技术栈： uniapp、vue3、uview-plus

2.封装uni.request

如图：

/**
 * 发起网络请求
 *
 * @see https://uniapp.dcloud.net.cn/api/request/request.html#request
 * 
 * 判断环境 给URL
 */
import config from "./config"
import { clearToken } from "@/utils/token.js"
const TRUE_API = config[config.DEFINE_ENV].TRUE_API // 实际网址
const BASE_API = config[config.DEFINE_ENV].BASE_API // 接口代理

//token判断环境的token
let token = ''

// if (config.DEFINE_ENV == "development") token = 'abc'
// if (config.DEFINE_ENV == "production") token = uni.getStorageSync("TOKEN_KEY")

console.log("请求网址：", TRUE_API + BASE_API);

// 请求前的headers配置
const header = {
	"Authorization": uni.getStorageSync("TOKEN_KEY"),
}


export function request(res) {
	const {url, method, data} = res
	return new Promise((resolve, reject) => {
		header.Authorization = uni.getStorageSync("TOKEN_KEY")
		uni.request({
			url: `${TRUE_API}${BASE_API}${url}`,
			header,
			method: method || "GET",
			data,
			success: res => {
				const {
					status,
					message,
					data
				} = res.data;
				console.log("res", res);
				if (status === 0) {
					return resolve(data);
				} else if (status === 1) {
					uni.showToast({
						title: message,
						icon: "success"
					})
					return resolve(data);
				} else if (status >= 2) {
					uni.showToast({
						title: message,
						icon: "error"
					})
					return reject(data);
				} else if (status == -1001) {
					// token 失效
					clearToken()
				} else {
					reject(data)
				}
			},
			fail: err => {
				reject(err)
			}
		})
	})
}

/*
 * 本页面参数修改后，记得重新启动项目再查看
 * */
const config = {
	DEFINE_ENV: process.env.NODE_ENV,
	// 两个环境，分别是测试、生产
	development: {
		SERVICE_DIR_NAME: '', // 看看我们的网站路径是啥，要不要在网站后面加上比如/web什么的，如果是/web，这里就/web就行了
		BASE_API: '/pts', // 你的接口代理，如果是/api，你就写/api，如果是/webapi，就写/webapi，配置之后，你自己封装接口不需要写这个，正常写就行了
		TRUE_API: 'https://dev-api.mypacelab.com', // 这个就是我们实际上后端接口地址，就是我们不带/api的地址，我们使用代理的话就写BASE_API和TRUE_API，不用代理的话，就只配置BASE_API
		PROJECT_API_URL: '' // 接口真实地址
	},
	production: {
		SERVICE_DIR_NAME: '',
		BASE_API: '/pts',
		TRUE_API: 'https://api.mypacelab.com',
		PROJECT_API_URL: '',
	}
}

export default config