【前端开发】Uniapp：uView组件库和封装接口请求

【uView组件库导入及使用】

1. 导入uView组件库依赖

• （无package.json）npm init -y
• npm install uview-ui@1.8.8
• 安装成功，自动放到“@/node_modules/uview-ui/”（可自行更换路径）

2. 项目配置使用uView

• App.vue

<style lang="scss">
	@import "uview-ui/index.scss";
</style>

• uni.scss

@import './uview-ui/theme.scss';

• pages.json

{
	"easycom": {
		"^u-(.*)": "@/node_modules/uview-ui/components/u-$1/u-$1.vue"
	},
	"pages":[]
}

• main.js

// 放置到 import Vue from 'vue'之后，app.$mount()之前
import uView from 'uview-ui'
Vue.use(uView)

【接口封装】

1. 创建 http.request.js 文件（封装全局请求配置）

export const baseURL = '域名';
 
export const request = (options) => {
	return new Promise((resolve, reject) => {
		uni.showLoading({
			title:'请求中...'
		})
		uni.request({
			url: baseURL + options.url,
			method: options.method || 'GET',
			data: options.data || {},
			header: {
				'token': uni.getStorageSync("token") || ""
			},
			success: (res) => {
				if (res.code == 200) {
					resolve(res.data)
				} else {
					reject(res)
				}
				// 如果不满足上述判断就输出数据
			},
			fail: (err) => {
				console.log(err)
				reject(err)
			},
			complete() {
				uni.hideLoading()
			}
		})
	})
}

2. 创建 http.api.js 文件（封装全局API）

import {
	request
} from '@/common/http.request.js'

// 登录
export const LoginUser = (data) => request({
	url: 'user/login',
	method: 'post',
	data
})

// 获取所有用户
export const getUserList = () => request({
	url: 'user/list',
	method: 'get',
})

3. 页面调用接口

<script>
	import {
		LoginUser,getUserList
	} from '@/common/http.api.js'
	export default {
		data() {
			return {
			}
		}
	}
</script>