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
},
}
}
4、组件使用遇到的问题
1、时间选择器 u-datetime-picker,自行处理确认操作，回显数据转换
<u-form-item label="接运时间" class="required" prop="carryDate" borderBottom @click="showDate = true">
<u--input v-model="appointmentBusinessData.carryDate" disabled disabledColor="#ffffff"
placeholder="请选择时间" border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-datetime-picker :show="showDate" v-model="date" @confirm='setDate' mode="datetime"></u-datetime-picker>
setDate(e) {
const timeFormat = uni.$u.timeFormat
this.date = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
this.appointmentBusinessData.carryDate = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
this.showDate = false
},
2、但单图片上传
<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="6" :multiple='false'
:maxCount="1" width="250" height="150">
<view class="upload_box">
<view class="upload_icon">
<view class="custom-icon custom-icon-shangchuan1"></view>
</view>
<view class="upload_btn">
<text>上传图片</text>
</view>
</view>
</u-upload>
.upload_box {
width: 674rpx;
height: 320rpx;
border: 2px dashed $uni-color-primary;
margin: 0 auto;
border-radius: 10rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.upload_icon {
.custom-icon {
font-size: 100rpx;
color: $uni-color-primary;
line-height: 100rpx;
}
}
.upload_btn {
margin-top: 40rpx;
width: 240rpx;
height: 64rpx;
border-radius: 32rpx;
background-color: $uni-color-primary;
color: #fff;
text-align: center;
line-height: 64rpx;
}
}
// 新增图片
async afterRead(event) {
let res= await this.uploadFilePromise(event.file.thumb)
this.fileList.push({
id: 1,
url: `${baseUrl}${res}`
})
this.appointmentBusinessData.deadCertificatePath=res
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: `${baseUrl}/api/ytapp/appointment-business/upload-dead-certificate`,
filePath: url,
name: 'file',
formData: {
},
success: (res) => {
let result= JSON.parse(res.data).data.deadCertificatePath;
resolve(result)
}
});
})
},
// 删除图片
async deletePic(event) {
this.fileList=[];
let params={
tableId: this.detailId,
urlPath: this.appointmentBusinessData.deadCertificatePath
}
let res = await deleteDeadImg(params);
uni.showToast({
title:res
})
},
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
