vue3+uniapp起步

1.接口封装

在根目录创建request/index.js

const config = {
baseUrl: "/dev-api"
}
if (process.env.NODE\_ENV === 'development') {
//开发环境
// #ifdef H5
// 如需跨域参照以下h5跨域配置
config.baseUrl = "/dev-api"
// #endif
// #ifdef APP-PLUS ||MP
config.baseUrl = "http://192.168.1.107:8080/xxx"
// #endif
} else {
baseUrl = ""
}
const errorCode = {
401: '认证失败，无法访问系统资源',
403: '当前操作没有权限',
404: '访问资源不存在',
default: '系统未知错误，请反馈给管理员',
}
import {
encodeURIParams
} from '@/util/strUtil';
export function request(options) {
{
return new Promise((resolve, reject) => {
		let token = uni.getStorageSync('token')
		let header = {
			'Content-Type': 'application/json;charset=utf-8',
			'Authorization': 'Bearer ' + token,
		}

		if (options.method === 'get' && options.params) {
			let url = `${options.url}?${encodeURIParams(options.params)}`;
			url = url.slice(0, -1);
			options.params = {};
			options.url = url;
		}
		uni.request({
			url: config.baseUrl + options.url,
			data: options.data || {},
			method: options.method || 'POST',
			header: options.headers || header,
			success: (res) => {
				// 控制台显示数据信息

				const code = res.data.code || 200;
				const msg = errorCode[code] || res.data.msg || errorCode.default;
				//文件流
				// if (res.request.responseType === 'blob' || res.request.responseType ===
				// 	'arraybuffer') {
				// 	return res.data;
				// }
				//登录过期
				if (code === 20101) {
					uni.removeStorage({
						key: 'token'
					})
					uni.navigateTo({
						url: '/pages/login/index'
					});
					return
				}
				//40201
				if (code === 500 || code === 9999 || code == 99999 || code == 40201 || code ==
					404) {
					console.log('error')
					uni.showToast({
						title: res.data.data || res.data.msg,
						icon: "none"
					})
					// return resolve('error');
					return reject()
				}
				// if (code !== 200) {
				// 	uni.showToast({
				// 		title: msg,
				// 		icon: "none"
				// 	})
				// 	return resolve('error');
				// }
				resolve(res.data.data)
				//res.data.code
			},
			fail: (err) => {
				console.log(err)
				// 页面中弹框显示失败
				uni.showToast({
					title: '请求接口失败',
					icon: "none"
				})
				// 返回错误消息
				reject(err)
			},
			catch: (e) => {
				console.log(e);
			}
		})
	})
}
}

具体使用

//导入request.js
import {
	request
} from "@/request/index";

export const list = (query) => request({
	url: '/xxx/xxx',
	method: 'get',
	params: query,
});
export const add= (data) => request({
	url: '/xxx/xxx',
	method: 'post',
	data,
});
export const del= (data) => request({
	url: '/xxx/xxx/' + data,
	method: 'delete',

});

2 跨域

//vue3中 manifest.json配置不起作用

在根目录创建vite.config.js,配置ip重写地址

import {
	defineConfig
} from "vite"
import uni from "@dcloudio/vite-plugin-uni";

export default defineConfig({
	plugins: [
		uni()
	],
	server: {

		proxy: {
			'/dev-api': {
				"target": "http://xxx:8080",
				changeOrigin: true,
				rewrite: (p) => p.replace(/^\/dev-api/, 'xxx'),
			},

		}
	}
})

3.pc模拟器请求没问题，真假报错

request:fail abort statusCode:-1 Expected URL scheme ‘http‘ or ‘https‘ but was ‘file‘报错

注意在前面request/index.js中配置的这段，真机配置的proxy不生效，得判断下

if (process.env.NODE_ENV === 'development') {
	//开发环境
	// #ifdef H5
	// 如需跨域参照以下h5跨域配置
	config.baseUrl = "/dev-api"
	// #endif
	// #ifdef APP-PLUS ||MP
	config.baseUrl = "http://xxx:8080/xxx"
	// #endif
} else {
	baseUrl = ""
}

4.配置自定义页面顶部

<template>
	<view class="fix-top">
		<view class="navbar">
			<view v-show="showBack" @click="handleReturn" class="nav-left">
				<image src="../static/prev.png" mode=""></image>
				<text>{{ btnName }}</text>
			</view>
			<text class="nav-title line1">{{ title }}</text>
			<view class="nav-right">
				<text>{{ rightText }}</text>

				<slot name="icon"></slot>
			</view>
		</view>
		<view class="slot-view">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		title: {
			type: String
		},
		btnName: {
			type: String,
			default: '返回'
		},
		icon: {
			type: String
		},
		showBack: {
			type: Boolean,
			default: true
		},
		rightText: {
			type: String,
			default: ''
		}
	});

	function handleReturn() {
		emit('return');
	}
	const emit = defineEmits(['return']);
</script>

<style lang="scss" scoped>
	.fix-top {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
	}

	.slot-view {
		height: calc(100vh - 140rpx);
		// overflow-y: scroll;
	}

	.navbar {
		width: 100vw;
		height: 100rpx;
		background: white;
		text-align: center;
		padding-top: 40rpx;
		font-size: 36rpx;
		line-height: 100rpx;
		position: relative;

		.nav-left {
			position: absolute;
			display: flex;
			align-items: center;
			left: 20rpx;
			cursor: pointer;

			text {
				color: #2697eb;
				font-size: 32rpx;
			}

			image {
				width: 26rpx;
				height: 42rpx;
				margin-right: 20rpx;
			}
		}

		.nav-title {
			color: #333;
			font-size: 36rpx;
			width: 60%;
			display: inline-block;
			// overflow: hidden;
		}

		.nav-right {
			position: absolute;
			right: 20rpx;
			top: 40rpx;

		}
	}
</style>

使用

<self-title :showBack="false" :title="xxx" :rightText="finishCount + '/' + list.length">
    //内容
</self-title>