vue2+uniapp+uview 搭建项目

vue2+uniapp+uview 搭建项目

一、uniapp创建项目

二、安装uView

1、Hbuilder X方式

下载地址：https://ext.dcloud.net.cn/plugin?id=1593

2、下载安装方式配置

• 1、安装scss

  // 安装sass
  	npm i sass -D
  
  // 安装sass-loader
  	npm i sass-loader -D
  

• 2、引入uView主JS库

  // 在项目根目录中的main.js中
  	import uView from '@/uni_modules/uview-ui'
  	Vue.use(uView)
  

• 3、在引入uView的全局SCSS主题文件

  // 在项目根目录的uni.scss中引入此文件。
  	@import '@/uni_modules/uview-ui/theme.scss';
  

• 4、引入uView基础样式

• 5、默认单位配置

  // main.js，注意要在use方法之后执行
  	import uView from 'uview-ui'
  	Vue.use(uView)
  // 如此配置即可
  	uni.$u.config.unit = 'rpx'
  

3、Http请求封装

• 1、全局配置，以及请求，响应拦截器定义

// 在/config/request.js中
// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
	// 初始化请求配置
	uni.$u.http.setConfig((config) => {
		/* config 为默认全局配置*/
		config.baseURL = 'http://120.77.151.55:8096/appointment'; /* 请求地址 */
		return config
	})

	// 请求拦截
	uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
		// 如果没有定义custom的closeLoading参数为true的话，默认进行toast弹出提示
		if (!config?.custom?.closeLoading) {
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
		}

		// 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
		config.data = config.data || {}
		
		// 配置是否需要token，添加对应的请求头
		// config.header.token = vm.$store.state.userInfo.token

		return config
	}, config => { 
		return Promise.reject(config)
	})

	// 响应拦截
	uni.$u.http.interceptors.response.use((response) => {
		setTimeout(() => {
			uni.hideLoading();
		}, 3000)

		/* 对响应成功做点什么 可使用async await 做异步操作*/
		const data = response.data

		// 自定义参数
		const custom = response.config?.custom
		if (data.code !== 200) {
			// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
			if (!custom.toast) {
				uni.$u.toast(data.message)
			}

			// 如果需要catch返回，则进行reject
			if (custom?.catch) {
				return Promise.reject(data)
			} else {
				// 否则返回一个pending中的promise，请求不会进入catch中
				return new Promise(() => {})
			}
		}
		return data === undefined ? {} : data
	}, (response) => {
		// 对响应错误做点什么 （statusCode !== 200）
		if (response.errMsg == 'request:fail timeout') {
			uni.showToast({
				title: '请求超时，请重试!',
				duration: 2000,
				icon: "none"
			});
		} else if (response.errMsg == 'request:fail ') {
			uni.showToast({
				title: '无网络!',
				duration: 2000,
				icon: "none"
			});
		} else {
			uni.showToast({
				title: '服务器错误',
				duration: 2000,
				icon: "none"
			});
		}
		return Promise.reject(response)
	})
}

• 2、引用配置

  // 引入请求封装，将app参数传递到配置中
  require('@/config/request.js')(app)
  

• 3、Api集中管理

  const http = uni.$u.http
  
  // post请求，获取菜单
  export const postMenu = (params, config = {}) => http.post('/ebapi/public_api/index', params, config)
  
  // get请求，获取菜单，注意：get请求的配置等，都在第二个参数中，详见前面解释
  export const getMenu = (data) => http.get('/ebapi/public_api/index', data)
  
  // 案例
  export const findUserProjectList = (params, config = {}) => http.post('/relation/findUserProjectList', params, config)
  

• 4、发送请求

  import { findUserProjectList } from '/config/api.js';
  
  // await等待，注意与async结合使用
  await postMenu({patId:  '2' },{ custom: { closeLoading: true }})
  

三、忽略文件 .gitignore

// 在项目根目录中创建.gitignore
# Mac
.DS_Store
**/.DS_Store

# vim/vi
*.swp

# JavaScript
node_modules/
.node_modules/
.eslintcache
unpackage/dist/build/
unpackage/dist/dev/

# python
*.pyc