uni-app的功能主要包括以下几点：
一、跨平台开发能力
uni-app实现了一套代码，同时运行到多个平台，包括iOS、Android、H5以及各种小程序（如微信、支付宝、百度、字节跳动、QQ等）。
二、丰富的组件库
uni-app提供了包括基础组件、表单组件、交互组件等在内的丰富组件库，这些组件可以在开发中被多次使用，提高开发效率。
三、页面设计
在uni-app中，可以创建多个页面，每个页面可以有不同的模板、不同的组件和不同的样式。
开发人员可以通过页面设计实现页面样式和布局的构建，同时，uni-app的响应式布局特性也可以确保页面在不同手机上正常显示。
四、状态管理
uni-app采用Vuex作为状态管理方案，开发者可以通过Vuex将应用中的状态统一管理和控制，避免了状态分散、难以维护的问题。
Vuex提供了丰富的API，可以实现各种不同的状态控制和数据操作。
五、代码编辑与智能提示
uni-app内置了Code Snippet功能，这是一种代码块，它可以帮助开发人员节省大量的时间和代码。
Code Snippet可以在代码编辑器中自动补全代码，并可以帮助开发人员快速完成代码片段，避免了大量重复性的代码编写。
六、预览和调试
uni-app支持在IDE中直接进行预览和调试，这样的调试方式可以省去开发者在多个平台中来回切换的过程。
同时，uni-app还提供了具有一定模拟性的多平台真机预览模拟器，可以帮助开发者更加直观地了解应用在不同平台中的表现。
七、打包和发布
uni-app支持不同平台的打包和发布，开发者可以根据需求选择要发布的平台和版本号信息等，进行构建和打包操作。
uni-app内置了应用签名和打包环境的检测功能，确保在打包之前应用环境的正常性。
八、API和插件支持
uni-app提供了众多API和插件，可以满足不同场景下开发者的需求。
例如，uni.request API可以方便地进行网络请求；另外，uni-app还提供了丰富的第三方插件，如地图插件、支付插件等，可以帮助开发者快速实现特定的功能。
九、条件编译
uni-app支持条件编译，可以根据不同平台编写特定的代码，从而确保在不同平台上的表现和功能都能得到优化。
以上是uni-app的主要功能，这些功能使得uni-app成为一款强大且灵活的跨平台应用开发框架
总的来说，uni-app 作为一款跨平台应用开发框架，简化了跨平台开发过程，提高了开发效率，降低了维护成本。随着移动互联网的不断发展，uni-app 将在未来发挥更加重要的作用。对于开发者来说，掌握 uni-app 的应用技巧，将有助于更好地满足市场需求，提升竞争力
uni-app 提供了丰富的组件和 API，用于支持其跨平台开发的能力。这些组件和 API 主要分为两大类：标准 ECMAScript 的 js API 和 uni 扩展 API。
标准 ECMAScript 的 js API：这是基于基础 JavaScript 语法的部分，类似于浏览器中扩展的 window、document、navigator 等对象，以及小程序中扩展的 wx.xx、my.xx、swan.xx 等 API。这些 API 适用于所有平台，是 JavaScript 的标准扩展。
uni 扩展 API：这是 uni-app 框架提供的特定于平台的 API。这些 API 用于处理平台特有的功能和操作。例如，在微信小程序中，可以使用特定的 API 来处理小程序特有的功能，如用户授权、界面交互等。
除了这些，uni-app 还提供了一系列基础组件，类似于 HTML 中的基础标签元素，但更适合手机端使用。这些组件可以组合使用，以快速开发应用程序。例如，可以使用 view、button、text 等组件来构建用户界面。
此外，uni-app 还支持自定义组件的开发，使得开发者可以根据需要创建自己的组件，以满足特定的需求。
总的来说，uni-app 的组件和 API 为其跨平台开发能力提供了强大的支持，使得开发者可以更加高效地开发适用于多个平台的应用程序
通过HBuilderX可视化界面创建第一个uni-app项目并运行在h5(浏览器)端：
第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目
类型，输入工程名，选择模板，点击创建，即可成功创建
最后：项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。
3.创建云数据库
我们还需要一个云数据库，当然这一步就省略了，小编这里已经注册好了一个账户，所以省略这一操作步骤了
2.再点击自己的云数据库关联就OK了
4.编写登录和注册页面
现在我们的可以直接开始编写我们的登录页了
<template>
<view class="leave">
<view class="list">
<!-- 每一张假条 -->
<view class="item" v-for="(item,index) in leavelist" :key="index">
<view class="title">
{{item.createTime}} {{item.name}}
</view>
<view class="reason">
{{item.reason}}
</view>
<view class="time">
时间:{{item.startTime}}至{{item.endTime}}
</view>
<view class="refuse" v-if="item.status==0">
<view>驳回理由</view>
<view>{{item.refuseReason}}</view>
</view>
<view class="success-status" v-if="item.status==1">
通过
</view>
<view class="refuse-status" v-else>
不通过
</view>
</view>
</view>
<button class="add" @tap="addLeave">+</button>
</view>
</template>
<script>
export default {
data() {
return {
leavelist: []
}
},
onShow() {
this.getLeavelist();
},
methods: {
//获取请假列表
getLeavelist() {
uniCloud.callFunction({
//函数名，（接口名）
name: "get-leave-list",
success: (res) => {
console.log(res);
this.leavelist = res.result.list.data;
}
})
},
addLeave(){
uni.navigateTo({
url:"/pages/leave/add"
})
}
}
}
</script>
<style lang="scss">
.leave {
background-color: #faf8fb;
padding-top: 20px;
height: 100vh;
.list {
margin: 0 15px 15px 15px;
.item {
background-color: white;
padding: 15px;
border-radius: 10px;
margin-bottom: 15px;
position: relative;
.title {
font-weight: bold;
font-size: 34rpx;
margin-bottom: 15px;
}
.reason {
color: gray;
margin-bottom: 8px;
}
.time {
color: #55aaff;
}
.refuse {
font-size: 20px;
margin-top: 15px;
view:first-child {
color: red;
}
view:last-child {
color: gray;
margin-top: 5px;
}
}
.success-status {
background-color: #00ff00;
width: 60px;
height: 28px;
line-height: 28px;
color: white;
text-align: center;
//绝对定位
position: absolute;
right: 0;
bottom: 20px;
transform: rotate(-45deg);
}
.refuse-status {
background-color: red;
width: 60px;
height: 28px;
line-height: 28px;
color: white;
text-align: center;
//绝对定位
position: absolute;
right: 0;
bottom: 20px;
transform: rotate(-45deg);
}
}
}
.add{
width: 50px;
background-color: #55aaff;
border-radius: 50%;
color: white;
font-size: 20px;
position: fixed;
right: 20px;
bottom: 20px;
}
}
</style>
然后在cloudfunctions新建一个云函数
<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>'use strict';
exports.main = async (event, context) => {
//event为客户端上传的参数
console.log('event : ', event)
const db = uniCloud.database();
var id = await db.collection('leave-table').add({
name: event.username,
stuClass: event.stuClass,
createTime: event.createTime,
reason: event.reason,
startTime: event.startDate,
endTime: event.endtdDte,
status: 2,
attachment: event.attachment,
})
if (id) {
return {
code: 200,
msg: "成功"
}
} else {
return {
code: 500,
msg: "失败"
}
}
};'use strict';
//async 异步 搭配await
exports.main = async (event, context) => {
//event为客户端上传的参数
//链接数据库
const db =uniCloud.database();
//查询数据库的数据 select * from user get()查询方法
var list=await db.collection('leave-table').get()
//返回数据前段
return {
code: 200,
msg: "成功",
list
};
};uni-app的优势主要体现在以下几个方面：
http://uni-app字体图标及设置背景图片-CSDN博客
跨平台开发：
uni-app支持一次编写，多端运行，包括iOS、Android、H5、微信小程序、支付宝小程序等多个平台。这极大地提高了开发效率，减少了开发人员的工作量和时间成本。
统一的开发语言：
uni-app基于Vue.js开发，使用Vue.js的语法和组件库，降低了学习成本。对于已经熟悉Vue.js的开发者来说，上手uni-app更为快速和便捷。
高效的性能：
uni-app采用原生渲染技术，使得应用在不同平台上具有接近原生应用的性能表现，提供了流畅的用户体验。
丰富的组件和API：
uni-app提供了丰富的组件库和API，包括基础组件和扩展组件，满足各种应用场景的需求。同时，uni-app还提供了多种插件和扩展，支持开发者自由扩展和定制化。
活跃的社区和插件生态系统：
uni-app拥有庞大的社区和插件市场，开发者可以方便地获取到各种组件、模板和解决方案，加速开发进度。这也有助于开发者在遇到问题时快速找到解决方案。
易用的调试工具：
uni-app提供了强大的调试工具，可以在开发过程中进行实时预览和调试，帮助开发者快速定位和解决问题。
降低开发和维护成本：
通过跨平台开发，uni-app降低了开发和维护成本。开发者无需为不同平台编写和维护多套代码，只需编写一套代码即可实现多平台部署。这也有助于减少开发人员的数量和开发周期。
良好的用户体验：
由于uni-app采用原生渲染技术，并且提供了丰富的组件和API，因此开发者可以创建出具有出色用户体验的应用。无论是界面设计还是交互效果，都可以达到原生应用的水平。
综上所述，uni-app的优势在于其跨平台开发能力、统一的开发语言、高效的性能、丰富的组件和API、活跃的社区和插件生态系统以及易用的调试工具等方面。这些优势使得uni-app成为一款受欢迎的跨平台开发框架，适用于各种应用场景和行业需
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>uni-app 的基本语言包括 JavaScript、Vue 和 CSS，以及 TypeScript、SCSS 等CSS预编译器。在 app 端，还支持原生渲染的 nvue，以及可以编译为 Kotlin 和 Swift 的 uts。DCloud 还提供了使用 JavaScript 编写服务器代码的 uniCloud 云引擎。所以只需掌握 JavaScript，就可以开发 Web、Android、iOS
758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
