vue2+uniapp+uview 搭建项目
vue2+uniapp+uView2.0搭建项目
·
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基础样式
<style lang="scss"> /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */ @import "@/uni_modules/uview-ui/index.scss"; </style>
-
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
更多推荐
已为社区贡献3条内容
所有评论(0)