uniapp/vue3(setup)/uviewplus/pinia/luch-request

1.创建项目

2.setup

<template>


</template>

<script setup>
	import {
		onLaunch,
		onShow,
		onHide
	} from '@dcloudio/uni-app'

	onLaunch(() => {

	})
	onShow(() => {

	})
	onHide(() => {

	})
</script>

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-plus/index.scss";
</style>

3.引入uviewplus

3.1下载地址

https://ext.dcloud.net.cn/plugin?id=8744

3.2引入uview-plus主JS库

// main.js
import uviewPlus from '@/uni_modules/uview-plus'

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}
// #endif

3.3引入uview-plus的全局SCSS主题文件

//uni.scss
@import '@/uni_modules/uview-plus/theme.scss';

3.4引入uview-plus基础样式

//App.vue
<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-plus/index.scss";
</style>

3.5安装依赖库

npm i dayjs
npm i clipboard

4.使用pinia

//store/modules/user.js
import {
	defineStore
} from 'pinia'

const userStore = defineStore('user', {
	state: () => ({
		user: {
			
		},

	}),
	getters: {
		sex: (state) => {
			return state.user.sex === 1 ? '男' : '女'
		}
	},
	actions: {
		getUser() {
			this.user = {
				name: "张三",
				age: 13,
				sex: 1
			}
		},
		getUserList() {
			let list = [{
				name: "张三",
				age: 13,
				sex: 1
			}, {
				name: "李四",
				age: 14,
				sex: 0
			}]
			return list
		}
	}
})
export default userStore

//store/index.js
import userStore from "./modules/user";
export  default function createStore(){
    return {
        user:userStore()
    }
}

//pages/index/index
<template>
	<view>
		{{ user.user }}
		{{ user.sex }}
		<view v-for="item in userList">
			{{ item.name }}
		</view>
	</view>
	<view style="padding: 20px;">
		<u-button type="primary" text="确定"></u-button>

	</view>
</template>

<script setup>
	import createStore from '/store'
	import {
		onMounted,
		reactive
	} from "vue";

	const {
		user
	} = createStore()

	let userList = reactive([])
	onMounted(() => {
		user.getUser()
		userList = user.getUserList()
	})
</script>

<style>

</style>

5.luch-request

5.1配置常用的资源

//config/index.js
import QQMapWX from "./qqmap-wx-jssdk";//腾讯地图，根据实际情况引入，需要额外下载qqmap-wx-jssdk
const qqmapsdk = new QQMapWX({
	key: '自己的key'
});
const baseUrl= 'https://test.com'
const config = {
	qqmapsdk: qqmapsdk, 
	baseUrl:baseUrl,
	uploadUrl:baseUrl+'/api/common/upload'
}

export default config

5.2配置请求拦截和相应拦截

//config/request.js
import config from "./index";

const requestInterceptors = (vm) => {
    /**
     * 请求拦截
     * @param {Object} http
     */
    uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作

        // 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
        config.data = config.data || {}
        config.header.token = uni.getStorageSync("token") ||""//请求头
        // 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
        // console.log(vm.$store.state);
        return config
    }, (config) => // 可使用async await 做异步操作
        Promise.reject(config))
}
const responseInterceptors = (vm) => {
    /**
     * 响应拦截
     * @param {Object} http
     */
    uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
        const data = response.data
        // 自定义参数
        const custom = response.config?.custom
        if (data.code !== 1) { // 服务端返回的状态码不等于200，则reject()
            // 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
            if (custom.toast !== false) {
                uni.$u.toast(data.msg)
            }
            // 如果需要catch返回，则进行reject
            if (custom?.catch) {
                return Promise.reject(data)
            } else {
                // 否则返回一个pending中的promise
                return new Promise(() => {
                })
            }
        }
        return data.data || {}
    }, (response) => { /*  对响应错误做点什么 （statusCode !== 200）*/
     
        //按照自己项目写
        if (response.statusCode == 401) {
            uni.showModal({
                title: '提示',
                content: '您还未登录，是否前往登录',
                success: function(res) {
                    if (res.confirm) {
                        uni.reLaunch({
                            url: "/pages/login/login"
                        })
                    } else if (res.cancel) {
                        uni.reLaunch({
                            url: "/pages/index/index"
                        })
                    }
                },

            });
        }

    })
}

//  初始化请求配置
const initRequest = (vm) => {
    uni.$u.http.setConfig((defaultConfig) => {
        /* defaultConfig 为默认全局配置 */
        defaultConfig.baseURL = config.baseUrl /* 根域名 */
        return defaultConfig
    })
    requestInterceptors()
    responseInterceptors()
}
export {
    initRequest
}

5.3配置api

//config/api.js
const http = uni.$u.http

//post请求
export const postMenu = (params, config = {}) => http.post('/ebapi/public_api/index', params, config)
//get请求
export const getMenu1 = (params, config = {}) => http.get('/ebapi/public_api/index1', {params:params}, config)