uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
自研uni-app+vue3+uv-ui跨三端仿同程/携程酒店预订系统Uni-Vue3-WeTrip。
uniapp-vue3-wetrip原创基于vite5+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
三端预览
运行到app端+小程序端+h5端效果。
技术栈
- 开发工具:HbuilderX 4.36
- 技术框架:Uniapp+Vue3+Vite5+Pinia2
- UI组件库:uni-ui+uv-ui(uniapp+vue3组件库)
- 弹框组件:uv3-popup(自定义uniapp+vue3多端弹框组件)
- 自定义组件:uv3-navbar标题栏+uv3-tabbar菜单栏
- 缓存技术:pinia-plugin-unistorage
- 支持编译:H5+小程序+APP端
目前uniapp结合vue3开发跨端项目受到很多开发者青睐,之前也有分享三款uniapp+vue3实战项目案例。
uniapp-vue3-os手机os后台实例|vite5.x+uniapp多端仿ios管理系统
uniapp-vue3trip基于最新版跨平台框架开发,亲测在h5+小程序+app端运行效果基本保持一致。
项目框架目录
另外还内置了消息聊天功能模块。
uniapp-vue3-wetrip酒店预订app系统已经发布到我的原创作品集,欢迎下载使用,感谢大家的支持。
https://gf.bilibili.com/item/detail/1107519011
公共模板结构
<script setup>
// #ifdef MP-WEIXIN
defineOptions({
/**
* 解决小程序class、id穿透问题
* manifest.json中配置mergeVirtualHostAttributes: true, 在微信小程序平台不生效,组件外部传入的class没有挂到组件根节点上,在组件中增加options: { virtualHost: true }
* https://github.com/dcloudio/uni-ui/issues/753
*/
options: { virtualHost: true }
})
// #endif
const props = defineProps({
// 是否显示自定义tabbar
showTabBar: { type: [Boolean, String], default: false },
})
</script> <template>
<view class="uv3__container flexbox flex-col flex1">
<!-- 顶部插槽 -->
<slot name="header" /> <!-- 内容区 -->
<view class="uv3__scrollview flex1">
<slot />
</view> <!-- 底部插槽 -->
<slot name="footer" /> <!-- tabbar栏 -->
<uv3-tabbar :show="showTabBar" transparent zIndex="99" />
</view>
</template>
uniapp+vue3自定义标题栏+底部菜单栏
在components目录下自定义导航条/菜单栏组件。
底部tabbar菜单栏支持高斯模糊虚化背景效果。
顶部Navbar支持如下参数
const props = defineProps({
// 是否是自定义导航
custom: { type: [Boolean, String], default: false },
// 是否显示返回
back: { type: [Boolean, String], default: true },
// 标题
title: { type: [String, Number], default: '' },
// 标题颜色
color: { type: String, default: '#fff' },
// 背景色
bgcolor: { type: String, default: '#07c160' },
// 标题字体大小
size: { type: String, default: null },
// 标题是否居中
center: { type: [Boolean, String], default: false },
// 是否搜索
search: { type: [Boolean, String], default: false },
// 是否固定
fixed: { type: [Boolean, String], default: false },
// 是否背景透明
transparent: { type: [Boolean, String], default: false },
// 设置层级
zIndex: { type: [Number, String], default: '2023' },
// 自定义iconfont字体图标库前缀
customPrefix: { type: String, default: 'uv3trip-icon' },
// 自定义样式
customStyle: String,
})
底部Tabbar支持如下参数
const props = defineProps({
// 当前选中项
current: { type: [Number, String] },
// 背景色
bgcolor: { type: String, default: '#fff' },
// 颜色
color: { type: String, default: '#333' },
// 激活颜色
activeColor: { type: String, default: '#f90' },
// 是否固定
fixed: { type: [Boolean, String], default: false },
// 是否背景透明
transparent: { type: [Boolean, String], default: false },
// 是否中间凸起按钮
dock: { type: [Boolean, String], default: true },
// 设置层级
zIndex: { type: [Number, String], default: '2024' },
// 自定义iconfont字体图标库前缀
customPrefix: { type: String, default: 'uv3trip-icon' },
// 自定义样式
customStyle: String,
// 是否显示
show: { type: Boolean, default: true },
// tab选项
tabs: {
type: Array,
default: () => []
}
})
uniapp+vue3酒店预订模块
预订模块涉及功能点多,为了维护方便,单独抽离了一个公共组件。
日期选择则是使用自定义弹窗+uv-ui日历组件实现功能。支持自定义开始/结束日期、日期区间、日期自定义打点信息。
<!-- 日历 -->
<uv3-popup
v-model="isVisibleCalendar"
title="选择日期"
position="bottom"
round
xclose
xposition="left"
:customStyle="{'overflow': 'hidden'}"
@open="showCalendar=true"
@close="showCalendar=false"
>
<uv-calendars
v-if="showCalendar"
ref="calendarRef"
mode="range"
insert
color="#ffaa00"
:startDate="startDate"
:endDate="endDate"
:date="rangeDate"
:selected="dingDate"
title="选择日期"
start-text="入住"
end-text="离店"
@change="handleCalendarChange"
/>
</uv3-popup>
/**
* 日期参数
*/
const isVisibleCalendar = ref(false)
const showCalendar = ref(false)
const calendarRef = ref(null)
const nightNum = ref(1)
// 限制日期选择范围-开始日期
const startDate = ref(getDate(new Date()).fullDate)
// 限制日期选择范围-结束日期
const endDate = ref(getDate(new Date(), 90).fullDate)
// 自定义默认选中日期,不传默认为今天。mode="multiple"或mode="range"时,该值为数组
const rangeDate = ref([getDate(new Date()).fullDate, getDate(new Date(), 1).fullDate])
// 打点,期待格式[{date: '2019-06-27', info: '签到', disable: false}]
const dingDate = ref([
{
date: getDate(new Date(), 3).fullDate,
info: '已预订',
infoColor: '#ffaa00',
badge: true
},
{
date: getDate(new Date(), 4).fullDate,
info: '已满',
disable: true,
},
{
date: getDate(new Date(), 5).fullDate,
info: '优惠',
infoColor: '#19be6b',
topinfo: '¥99',
topinfoColor: '#19be6b'
},
{
date: getDate(new Date(), 7).fullDate,
info: '有空房',
infoColor: '#09f',
},
])
uniapp+vue3消息聊天模块
项目中新增了消息聊天模块。这块功能是之前开发的一款uniapp+vue3仿微信app聊天功能的精简版。
https://www.cnblogs.com/xiaoyan2017/p/18165578
聊天编辑框支持h5/小程序端/app端,已经免费发布到插件市场,欢迎下载使用。
https://ext.dcloud.net.cn/plugin?id=13275
综上就是uniapp+vue3实战开发酒店预订app应用的一些知识分享,希望对大家有所帮助!
最后附上几个跨平台项目实例
HarmonyOS-Chat聊天室|纯血鸿蒙Next5 api12聊天app|ArkUI仿微信
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序
Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板
Vite5+Electron聊天室|electron31跨平台仿微信EXE客户端|vue3聊天程序
flutter3-dylive仿抖音App实例|Flutter3+Getx实战短视频直播应用
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)的更多相关文章
- 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」
uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...
- 基于uni-app全端弹框组件uaPopup「兼容h5+小程序+app端|nvue」
uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对 ...
- 【实战】SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 基于SpringBoot+uniapp简单通讯聊天软件 项目介绍 JavaDog Chat 简单通讯聊天软件是基于SpringBoot+MybatisPlus+ ...
- uni-app开发的应用(小程序,app,web等),使用Node+Koa2开发的后端程序接收上传文件的方法
uni-app使用使用Node+Koa2开发的后端程序接收上传的文件 通过gitbook浏览此随笔 通过其它客户端上传(h5,小程序等),接收方法一致 使用koa接收时,我们需安装一个中间件koa-b ...
- uniapp之uni-starter小程序多端研发框架搭建与项目实践
随着移动互联网的飞速发展,无数移动APP琳琅满目:在移动App的发展的基础上,衍生了小程序.轻应用技术,它随时可用,但又无需安装卸载.小程序是一种不需要下载安装即可使用的应用,它实现了应用" ...
- uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面
一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...
- uni-app开发小程序入门到崩溃
最近一段时间公司要做一个小程序项目,还要支持,微信小程序,头条小程序,百度小程序.一套代码,实现三个平台.当时接到这个任务,就不知道怎么去下手,一套代码,分别要发布三个平台,赶紧就去上网了解这些东西, ...
- 微信小程序体验(1):携程酒店机票火车票
在 12 月 28 日微信公开课上,张小龙对微信小程序的形态进行了阐释,小程序有四个特定:无需安装.触手可及.用完即走.无需卸载. 由于携程这种订酒店.火车票和机票等工具性质非常强的服务,非常符合张小 ...
- 京东 Vue3 组件库支持小程序开发啦!
源码抢先看: https://github.com/jdf2e/nutui NutUI 3.0 官网:https://nutui.jd.com/3x/#/ 小程序多端适配 设计初衷 在跨端小程序的开发 ...
- uniapp医院预约挂号微信小程序
开头感言:最近看小程序很火,也想弄一个看看,用了一些时间从0开始写,也记录了一些笔记,自己用框架写的模板,不是很精美,后面会慢慢优化,功能也是后面慢慢加上去的, 其中功能这块,起初只是一些简单的功能, ...
随机推荐
- CMake构建学习笔记16-使用VS进行CMake项目的开发
目录 1. 概论 2. 详论 2.1 创建工程 2.2 加载工程 2.3 配置文件 2.4 工程配置 2.5 调试执行 3. 项目案例 4. 总结 1. 概论 在之前的系列博文中,我们学习了如何构建第 ...
- SpringBoot——项目快速启动
SpringBoot项目快速启动 对SpringBoot项目打包(执行Maven构建指令package) 执行后会生成对应的项目 jar包,在文件夹找到该文件 在对应文件夹下即可执行 j ...
- MyBatis——案例——删除(单个删除与批量删除)
删除一个 1.编写接口方法:Mapper接口 参数:id 结果:void /** * 删除 */ int deleteById(int id); 2.编写sql语句:SQL映射 ...
- AntDesign-Vue Table 查询与分页
前言 之前的增删改查小 Demo 已经快要进行到最后一步了,这节的任务是将请求数据的方式改为 分页,并且增加 分页条件查询 的功能. 页面布局 <a-table :data-source=&qu ...
- /proc/slabinfo 介绍
slabinfo - version: 2.1 # name <active_objs> <num_objs> <objsize> <objperslab&g ...
- 图像形态学操作(cv2库实现)
#coding:utf-8 import SimpleITK as sitk import numpy as np import cv2 # 膨胀 def dilateion(image): kern ...
- 2024年9月中国数据库流行度排行榜:TiDB重回前三,GoldenDB问鼎前五
9月墨天轮数据社区的中国数据库流行度排行榜如约而至.除了冠亚两位,排名第三至第五的数据库产品均经历了位次的变动.榜单之上,稳健的老牌强者.崛起的新兴产品.以及那些在背后默默积蓄力量.准备厚积薄发的竞争 ...
- dotnet的Lambda表达式 委托泛型(2) Action Func
// 总结:// 泛型:把类,方法,属性,字段做到了通用化// 反射:操作dll文件的一个帮助类库// 特性:就是一个特殊的类 自定义标记属性特性 他就是AOP的另一种实现方式 验证属性// 委托:就 ...
- yarn serve 开启项目服务失败 assets emit different content to the same filename
error: answer: 删除public的文件,重新 yarn serve :
- 1. C#面试题 - Webservice和WebApi的区别
1. Webservice : 基于SOAP协议的,数据格式时XML,只支持http协议,不是开源的,只能部署在IIS上 2. Webapi 开源的,.net 平台