自研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+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈

uniapp-welive仿微信/抖音直播带货|uni-app+vue3+pinia短视频直播商城

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端)的更多相关文章

  1. 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」

    uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...

  2. 基于uni-app全端弹框组件uaPopup「兼容h5+小程序+app端|nvue」

    uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对 ...

  3. 【实战】SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目

    JavaDog Chat v1.0.0 基于SpringBoot+uniapp简单通讯聊天软件 项目介绍 JavaDog Chat 简单通讯聊天软件是基于SpringBoot+MybatisPlus+ ...

  4. uni-app开发的应用(小程序,app,web等),使用Node+Koa2开发的后端程序接收上传文件的方法

    uni-app使用使用Node+Koa2开发的后端程序接收上传的文件 通过gitbook浏览此随笔 通过其它客户端上传(h5,小程序等),接收方法一致 使用koa接收时,我们需安装一个中间件koa-b ...

  5. uniapp之uni-starter小程序多端研发框架搭建与项目实践

    随着移动互联网的飞速发展,无数移动APP琳琅满目:在移动App的发展的基础上,衍生了小程序.轻应用技术,它随时可用,但又无需安装卸载.小程序是一种不需要下载安装即可使用的应用,它实现了应用" ...

  6. uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面

    一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...

  7. uni-app开发小程序入门到崩溃

    最近一段时间公司要做一个小程序项目,还要支持,微信小程序,头条小程序,百度小程序.一套代码,实现三个平台.当时接到这个任务,就不知道怎么去下手,一套代码,分别要发布三个平台,赶紧就去上网了解这些东西, ...

  8. 微信小程序体验(1):携程酒店机票火车票

    在 12 月 28 日微信公开课上,张小龙对微信小程序的形态进行了阐释,小程序有四个特定:无需安装.触手可及.用完即走.无需卸载. 由于携程这种订酒店.火车票和机票等工具性质非常强的服务,非常符合张小 ...

  9. 京东 Vue3 组件库支持小程序开发啦!

    源码抢先看: https://github.com/jdf2e/nutui NutUI 3.0 官网:https://nutui.jd.com/3x/#/ 小程序多端适配 设计初衷 在跨端小程序的开发 ...

  10. uniapp医院预约挂号微信小程序

    开头感言:最近看小程序很火,也想弄一个看看,用了一些时间从0开始写,也记录了一些笔记,自己用框架写的模板,不是很精美,后面会慢慢优化,功能也是后面慢慢加上去的, 其中功能这块,起初只是一些简单的功能, ...

随机推荐

  1. CMake构建学习笔记16-使用VS进行CMake项目的开发

    目录 1. 概论 2. 详论 2.1 创建工程 2.2 加载工程 2.3 配置文件 2.4 工程配置 2.5 调试执行 3. 项目案例 4. 总结 1. 概论 在之前的系列博文中,我们学习了如何构建第 ...

  2. SpringBoot——项目快速启动

    SpringBoot项目快速启动 对SpringBoot项目打包(执行Maven构建指令package)    执行后会生成对应的项目 jar包,在文件夹找到该文件    在对应文件夹下即可执行  j ...

  3. MyBatis——案例——删除(单个删除与批量删除)

    删除一个   1.编写接口方法:Mapper接口     参数:id     结果:void /** * 删除 */ int deleteById(int id);   2.编写sql语句:SQL映射 ...

  4. AntDesign-Vue Table 查询与分页

    前言 之前的增删改查小 Demo 已经快要进行到最后一步了,这节的任务是将请求数据的方式改为 分页,并且增加 分页条件查询 的功能. 页面布局 <a-table :data-source=&qu ...

  5. /proc/slabinfo 介绍

    slabinfo - version: 2.1 # name <active_objs> <num_objs> <objsize> <objperslab&g ...

  6. 图像形态学操作(cv2库实现)

    #coding:utf-8 import SimpleITK as sitk import numpy as np import cv2 # 膨胀 def dilateion(image): kern ...

  7. 2024年9月中国数据库流行度排行榜:TiDB重回前三,GoldenDB问鼎前五

    9月墨天轮数据社区的中国数据库流行度排行榜如约而至.除了冠亚两位,排名第三至第五的数据库产品均经历了位次的变动.榜单之上,稳健的老牌强者.崛起的新兴产品.以及那些在背后默默积蓄力量.准备厚积薄发的竞争 ...

  8. dotnet的Lambda表达式 委托泛型(2) Action Func

    // 总结:// 泛型:把类,方法,属性,字段做到了通用化// 反射:操作dll文件的一个帮助类库// 特性:就是一个特殊的类 自定义标记属性特性 他就是AOP的另一种实现方式 验证属性// 委托:就 ...

  9. yarn serve 开启项目服务失败 assets emit different content to the same filename

    error: answer: 删除public的文件,重新 yarn serve :

  10. 1. C#面试题 - Webservice和WebApi的区别

    1. Webservice : 基于SOAP协议的,数据格式时XML,只支持http协议,不是开源的,只能部署在IIS上 2. Webapi 开源的,.net 平台