Uniapp

1、tabbar底部不显示原因

tabbar的list里面配置的页面顺序要和pages中配置的页面顺序要一致才能显示

2、Uniapp请求封装

1、设置请求基地址：base.js

2、封装请求和响应： request.js

3、应用在具体接口请求：index.js

1、base.js

//请求基地址
const BASE_URL = "http://localhost:8600"
module.exports = {
	BASE_URL: BASE_URL
}

2、request.js

//const BASE_URL = `http://localhost:8600`;
import { BASE_URL} from './base.js';
export const request = (options) => {
	return new Promise((resolve,reject) => {
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',
			//header: {token: uni.getStorageSync('user') ? uni.getStorageSync('user').token : ''},
			data: options.data || {},
			success: (res) => {
				const data = res.data
				//无权限
				if(data.code === '401'){
					uni.navigateTo({
						url: '/pages/my/my'
					})
				} else if(data.code !== '200'){
					uni.showToast({
						icon: 'error',
						title: data.message
					})
				}
				resolve(data)
			},
			fail: (error) => {
				uni.showToast({
					icon: 'error',
					title: '系统错误！'
				})
				reject(error)
			}
		})
	})
}

3、index.js

import {request} from '@/utils/request.js'
 
export function getImage () {  //登录
	return request({
		url:'/api/image',
		method:'GET'
	})
}

4、具体应用在index.vue中进行请求

3、setUp语法中使用uniapp的onLoad生命周期函数

//导入onLoad函数
import {
		onLoad
	} from "@dcloudio/uni-app";
	onLoad((e) => {
		console.log(e);
	})

4、文件上传

<view @click="onChangeAvatar">
								<uni-forms-item label="头像" required name="avatar">
									<image style="width: 50px; height: 50px; border-radius: 50%;" mode="aspectFill"
										:src="url"></image>
								</uni-forms-item>
								<text style="margin-left: 65px;font-size: 12px;">上传头像</text>
							</view>

const url = ref('');
	function onChangeAvatar() {
		//调用小程序的接口
		uni.chooseMedia({
			count: 1,
			mediaType: ['image'],
			success(res) {
				//获取本地路径
				const {
					tempFilePath
				} = res.tempFiles[0];
				//文件上传接口
				uni.uploadFile({
					//文件上传请求路径
					url: 'http://localhost:8600/common/upload',
					filePath: tempFilePath,
					name: 'file',
					success: (res) => {
						if (res.statusCode === 200) {
							const avatar = JSON.parse(res.data).data;
							url.value = avatar;
							userFormData.value.avatar = avatar;
						}else{
							uni.showToast({
								title: "上传头像出现异常",
								icon: 'none'
							})
						}
					}
				})
			}
		})
	}

5、使用Pinia作数据状态管理

说明：Uniapp内置了Pinia，可以直接使用

具体步骤如下

• 在项目目录中新建stores,在此目录下创建一个js文件夹，具体使用，我这里命名为user.js用来存储用户登录后返回的用户信息
• 在main.js文件中引入

import { createSSRApp } from 'vue';
import * as Pinia from 'pinia';

export function createApp() {
	const app = createSSRApp(App);
	app.use(Pinia.createPinia());
	return {
		app,
		Pinia, // 此处必须将 Pinia 返回
	};
}

• user.js文件

import { defineStore } from 'pinia';
import { ref } from 'vue';
export const userStore = defineStore('user', () => {
	const userInfo = ref({});
	return { userInfo };
});

• 在需要数据的页面引入即可：引入到login页面，保存用户登录后后台返回的用户信息，使用Pinia作全局状态管理，方便在任何一个组件中使用到用户信息。

import {
		userStore
	} from '@/stores/user.js';
	const user = userStore();

function doLogin() {
		valiForm.value.validate((valid) => {
			if (!valid) {
				//提交预约数据
				login(userData.value).then(res => {
					if (res.code === 200) {
						//全局保存
						user.userInfo.value = res.data.user;
					}
					}
				})
			}
		})
	};

• 在需要用到用户信息的组件中引入，然后直接取值使用即可

import {
		userStore
	} from '@/stores/user.js';
	//引入Pinia中保存的user信息
	const user = userStore();

//用户名
	const name = ref('');
	//头像
	const avatar = ref('');
	//从Pinia存储获取用户登录信息
	function getUserInfo() {
		name.value = user.userInfo.value.name;
		avatar.value = user.userInfo.value.avatar;
	};