uni-app概论以及创作请假列表

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。它允许开发者使用一套代码，同时编译成 iOS、Android、Web（响应式）、以及各种小程序（微信、支付宝、百度、头条、飞书、QQ、快手、钉钉、淘宝）和快应用等多个平台的应用。这种“一次编写，多端运行”的特性

下面做一个请假列表的项目

<template>
	<view class="add-leave">
		<view class="user-info">
			<view>
				<text>申述人：</text>某某人
			</view>
			<view>
				<text>班级：</text>全日制2022计算机应用技术（软件外包服务方向）2班
			</view>
		</view>
		<view class="upload-img">
			<view class="title">
				上传图片
			</view>
			<view class="upload">
				<uni-file-picker limit="3" @select="onselect"></uni-file-picker>
			</view>
			<view class="tip">
				最多可上传三张图片
			</view>
		</view>
		<view class="reason">
			<view class="title">
				申请理由
			</view>
			<textarea v-model="reason" placeholder-style="color:#999" placeholder="请输入申请理由" />
		</view>
		<!-- 开始时间 -->
		<view class="time">
			<view class="left">
				开始时间
			</view>
			<view class="right">
				<picker mode="date" :value="startdate" @change="bindStartDateChange">
					<view class="uni-input">{{startdate}}</view>
				</picker>
			</view>
		</view>
		<!-- 结束时间 -->
		<view class="time">
			<view class="left">
				结束时间
			</view>
			<view class="right">
				<picker mode="date" :value="endtdate" @change="bindEndtDateChange">
					<view class="uni-input">{{endtdate}}</view>
				</picker>
			</view>
		</view>
		<button type="primary" @tap="addLeave">确认提交</button>
	</view>

</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				startdate: currentDate,
				endtdate: currentDate,
				reason: "",
				createTime: currentDate,
				attchement: ""
			}
		},
		onLoad() {

		},
		methods: {
			// 选择日期的时候触发
			bindStartDateChange: function(e) {
				this.startdate = e.detail.value
			},
			bindEndtDateChange: function(e) {
				this.endtdate = e.detail.value
			},
			//获取当前日期
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			addLeave() {
				uniCloud.callFunction({
					name: "add-leave2",
					data: {
						username: this.attchement,
						attachment: "吴彦祖",
						reason: this.reason,
						startDate: this.startdate,
						endtdDte: this.endtdate,
						stuClass: "计算机应用技术外包2班",
						createTime: this.createTime
					},
					success: (res) => {
						console.log(res);
						if (res.result.code == 200) {
							uni.showToast({
								title: "假条添加成功",
								icon: "none",
								duration: 2000
							})
							uni.navigateTo({
								url: "/pages/index/index"
							})
						}
					}
				})
			},
			onselect(e) {
				console.log(e);
				console.log("选择了图标");
				uniCloud.uploadFile({
					filePath: e.tempFilepaths[0],
					cloudPath: '微信头像.jpg',
					success: (res) => {
						console.log(res);
						this.img.push(res.fileID);
						console.log(this.attchement)
					}
				})
			}
		}
	}
</script>
<!-- scoped 确保里面的样式只对当前页面生效 -->
<style lang="scss" scoped>
	.add-leave {
		padding: 15px;
		background-color: #f8f8f8;
		height: 100vh;

		.user-info {
			view {
				color: #3e515c;
			}

			view:first-child {
				margin-bottom: 3px;
				font-size: 28rpx;
			}

			text {
				font-weight: bold;
				font-size: 30px;
			}
		}

		.upload-img {
			margin-top: 15px;

			.title {
				color: #3e515c;
				font-weight: bold;
				margin-bottom: 10px;
			}

			.tip {
				font-size: 24rpx;
				margin: 15px 0;
				color: gray;
			}

			//!important  使得样式的权重最高
			/deep/ .file-picker__box-content {
				background-color: white;
				border-color: white !important;
			}
		}

		.reason {
			.title {
				color: #3e515c;
				font-weight: bold;
				margin-bottom: 10px;
			}

			textarea {
				background-color: white;
				padding: 15px;
				width: 90%;
			}
		}

		.time {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			background-color: white;
			padding: 15px;
		}
	}
</style>

uni-app 的基本语言包括 JavaScript、Vue 和 CSS，以及 TypeScript、SCSS 等CSS预编译器。在 app 端，还支持原生渲染的 nvue，以及可以编译为 Kotlin 和 Swift 的 uts。DCloud 还提供了使用 JavaScript 编写服务器代码的 uniCloud 云引擎。所以只需掌握 JavaScript，就可以开发 Web、Android、iOS、各家小程序以及服务器等全栈应用。

【Python学习篇】Python实验小练习——面向对象编程（十二）-CSDN博客

[C++] 从零实现一个ping服务-CSDN博客

spring 单元测试注解-CSDN博客

KNX智能家具工程-CSDN博客

http://ASP.NET 官方网站： https://www.asp.net/

Java 注解设计 -- Java 语言注解的介绍、高阶应用与自定义注解-CSDN博客

【Python学习篇】Python实验小练习——面向对象编程（十二）-CSDN博客

uni-app字体图标及设置背景图片-CSDN博客

KNX智能家具工程-CSDN博客

挑战5分钟内基于Springboot+SpringMVC+Mybatis-plus快速构建web后端三层架构-CSDN博客

uni-app 的优势包括跨平台兼容性、易于上手、性能优化、丰富的插件生态和强大的社区支持。它适用于多种应用场景，如跨平台应用开发、小程序开发和混合应用开发。

10分钟部署一个个人博客-CSDN博客

在实际应用中，例如开发一款电商应用，开发者可以使用 uni-app 编写一套代码，同时发布到 iOS、Android、Web 以及各个小程序平台。在开发过程中，可以利用 uni-app 提供的插件和 API，快速实现商品展示、购物车、订单管理等功能。此外，uni-app 还提供了丰富的 UI 组件和样式库

总的来说，uni-app 作为一款跨平台应用开发框架，简化了跨平台开发过程，提高了开发效率，降低了维护成本。随着移动互联网的不断发展，uni-app 将在未来发挥更加重要的作用。对于开发者来说，掌握 uni-app 的应用技巧，将有助于更好地满足市场需求，提升竞争力