1、创建项目安装组件
npm install uview-ui
2、配置
- 引入uView主JS库
在项目src目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。
// main.js
import uView from "uview-ui";
Vue.use(uView);
- 在引入uView的全局SCSS主题文件
在项目src目录的uni.scss中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
- 引入uView基础样式
<style lang="scss">
/*每个页面公共css */
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
@import './static/css/iconfont.css';
page {
width: 100vw;
// height: calc(100% - var(--status-bar-height));
height: 100vh;
display: flex;
flex-direction: column;
box-sizing: border-box;
color: #333333;
font-size: 28rpx;
line-height: 40rpx;
image {
display: block;
}
}
::v-deep .uni-toast .uni-toast__content{
text-align: center!important;
}
view {
box-sizing: border-box;
}
uni-page-body {
width: 100vw;
height: 100vh;
}
a {
box-sizing: border-box;
}
image {
display: block;
}
img {
display: block;
}
p {
font-size: 13px;
line-height: 50rpx;
text-align: justify;
}
}
- 配置easycom组件模式
此配置需要在项目src目录的pages.json中进行。
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
- Cli模式额外配置
如果您是vue-cli模式的项目，还需要在项目根目录的vue.config.js文件中进行如下配置
// vue.config.js，如没有此文件则手动创建
module.exports = {
transpileDependencies: ['uview-ui']
}
3、项目目录配置
1、api目录（请求接口方法）例business.js
const http = uni.$u.http
//首页列表
export function getBygList(data = {}) {
return http.post('/app/byg_service_config/app_byg_list',data)
}
2、config目录（公共配置目录）
baseUrl.js
export const baseUrl='http://*/fmis-api';
request.js
let num=0;
import {baseUrl} from '@/config/baseUrl.js'
// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
// 初始化请求配置
uni.$u.http.setConfig((config) => {
/* config 为默认全局配置*/
config.baseURL = baseUrl; /* 根域名 */
// 配置请求头信息
config.header= {
'content-type': 'application/json;charset=UTF-8'
};
return config
})
// 请求拦截
uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
uni.showLoading({
title:'加载中'
})
num++
// 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
config.data = config.data || {}
// 根据custom参数中配置的是否需要token，添加对应的请求头
// if(config?.custom?.auth) {
// // 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
// config.header.token = vm.$store.state.userInfo.token
// }
const token = uni.getStorageSync('token');
config.header.token = token?token:'';
return config
}, config => { // 可使用async await 做异步操作
return Promise.reject(config)
})
// 响应拦截
uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
num--;
if (num <= 0) {
uni.hideLoading()
} else {
uni.showLoading({
title:'加载中'
})
}
const data = response.data
// 自定义参数
//const custom = response.config?.custom
if (data.code !== 1) {
return uni.$u.toast(data.message);
uni.hideLoading()
// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
// if (custom.toast !== false) {
// uni.$u.toast(data.message)
// }
// // 如果需要catch返回，则进行reject
// if (custom?.catch) {
// return Promise.reject(data)
// } else {
// // 否则返回一个pending中的promise，请求不会进入catch中
// return new Promise(() => { })
// }
}
return data.data === null ? data : data.data
}, (response) => {
// 对响应错误做点什么 （statusCode !== 200）
uni.hideLoading()
//return Promise.reject(response)
return uni.$u.toast(response);
})
}
3、main.js
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
// main.js
import uView from "uview-ui";
Vue.use(uView);
App.mpType = 'app'
const app = new Vue({
...App
})
// 引入请求封装，将app参数传递到配置中
require('./config/request.js')(app)
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
4、接口方法调用
import { getBygList } from '@/api/business.js'
export default {
data() {
return {
funeralHomeList:[]
}
},
onLoad() {
this.getBygList();
},
methods: {
async getBygList(){
let res= await getBygList({});
this.funeralHomeList=res
},
}
}