公司有这方面的需求,以前是用的uview1.0,现在uview2.0出来了当然要重新整理一个空项目了。
步骤
- 创建uniapp项目(直接在HBuilder X 中创建)
- 引入uViewUI
创建uniapp项目
直接创建一个空项目就行了。
文件 ==> 新建 ==> 项目 ==> 默认模板
引入uView
插件市场找到对应插件uView2.0,点击使用HBuilder X导入插件
。
导入插件后,项目目录会多出uni_modules
文件夹。接下来需要我们配置一些东西。具体可以看下载方式相关配置。这个没什么好讲的,直接跟着步骤走。简单说明一下~~
- 没安装
scss
插件的记得安装。- 引入uView主JS库
- 在项目根目录下的
uni.scss
中添加样式文件App.vue
中引入样式文件- 配置
easycom
组件模式
到了这里其实uView的组件就可以在项目中使用了。但是我想要说两点重要的东西,也是咱们项目中常用的东西。
自定义导航栏咱们可以根据项目需求自行进行二次封装,项目如果还OK,其实就直接使用该组件也是可以的。
请求配置
请求在项目中是必不可少的,uView都跟咱们封装好了,太香了。配置也是直接根据官网配置就行,简单说明一下。
- 根目录下创建目录(目录名自取),添加一个
http.js
文件。main.js
引入http.js
文件,并调用。
main.js
// main.js
import httpInit from './utils/http.js'
httpInit(app)
http.js
// http.js
import Vue from 'vue'
export default vm => {
// 初始化请求配置
const http = uni.$u.http
http.setConfig((config) => {
config.baseURL = 'url前缀自己写自己的';
return config
})
// 请求拦截
// 这里面常用就是添加token,其他需要做什么操作也可以
http.interceptors.request.use((config) => {
uni.showLoading({
mask: true
})
if (uni.getStorageSync('token')) {
config.header.Authorization = uni.getStorageSync('token')
}
return config
}, config => {
uni.hideLoading()
return Promise.reject(config)
})
// 响应拦截
// 这里面就是处理数据和解决一些异常,自行了解
http.interceptors.response.use((response) => {
uni.hideLoading()
const data = response.data
if (data.status == 'success') {
return data.data
} else {
uni.redirectTo({
url: "/pages/home/login"
});
}
}, (response) => {
uni.hideLoading()
return Promise.reject(response)
})
// 看各自爱好把,这里我直接添加到vue上面了,方便我直接使用this.$http使用。
Vue.prototype.$http = http
}
请求弄好了,看下使用把。简单写了下登录请求。
async login() {
const res = await this.$http.post('/api/Authorize/Login', {
Account: 'admin',
Pwd: '123456'
})
uni.setStorageSync('token', res.token)
uni.redirectTo({
url: './Index'
})
}