1、创建项目安装组件

npm install uview-ui

2、配置

  1. 引入uView主JS库
    在项目src目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。
// main.js
import uView from "uview-ui";
Vue.use(uView);
  1. 在引入uView的全局SCSS主题文件
    在项目src目录的uni.scss中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
  1. 引入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;
		}
	}
  1. 配置easycom组件模式
    此配置需要在项目src目录的pages.json中进行。
// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}
  1. 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
	})
},
# css # css3 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue