自创uniapp+vue3+uvui酒店预订app系统模板

经过两周左右高强度研发，原创跨三端新作vue3-uni-wetrip酒店预约系统正式完结了。

uniapp-vue3trip基于uniapp+vite5++pinia2+uv-ui技术开发的酒店预订系统，支持编译H5+小程序和App端，能够在不同平台上提供一致的用户体验。

实现技术

• 技术框架：uniapp+vue3+vite5
• 状态管理：pinia2
• UI组件库：uni-ui + uv-ui（uniapp+vue3组件库）
• 缓存技术：pinia-plugin-unistorage
• 支持编译：H5+小程序+APP端

功能特点

• 跨平台兼容性：支持H5、小程序和App端，确保在不同设备上体验一致性。
• 实时消息聊天：内置的消息聊天功能模块，增强用户间的沟通效率。
• 自定义组件：提供uv3-navbar标题栏和uv3-tabbar菜单栏等自定义组件，方便开发者根据需求进行调整。
• 缓存机制：利用pinia-plugin-unistorage实现数据缓存，提高应用性能。

项目结构及开发工具

使用HbuilderX 4.36编辑器构建项目，采用vue3 setup语法糖编码开发。

目前基于uniapp+vue3开发跨平台项目受到很多开发者青睐，附上几个之前uniapp+vue3实战案例。

uni-vue3-welive基于uniapp+vue3直播商城

uni-vue3-wechat：基于uni-app+vue3+pinia2多端仿微信App聊天

基于uniapp+vite5+pinia2跨端手机后台OA系统

公共模板布局

整个项目分为顶部导航+内容区+底部tab菜单三个模块。

<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>

App.vue模板

app.vue采用vue3 setup语法，顶部导航条采用自定义模式，在app.vue中获取顶部状态栏高度。

<script setup>
	import { provide } from 'vue'
	import { onLaunch, onShow, onHide, onPageNotFound } from '@dcloudio/uni-app'
	
	onLaunch(() => {
		console.log('App Launch')
		
		// 初始化启动
		initLaunch()
	})
	
	onShow(() => {
		console.log('App Show')
	})
	
	onHide(() => {
		console.log('App Hide')
	})
	
	onPageNotFound((e) => {
		console.warn('Route Error：', `${e.path}`)
	})
	
	const initLaunch = () => {
		// 获取系统信息
		uni.getSystemInfo({
			success: (e) => {
				// 获取手机状态栏高度
				let statusBar = e.statusBarHeight
				let customBar = 0
				
				// #ifndef MP
				customBar = statusBar + (e.platform == 'android' ? 50 : 45)
				// #endif
				
				// #ifdef MP-WEIXIN
				// 获取胶囊按钮的布局位置信息
				let menu = wx.getMenuButtonBoundingClientRect()
				// 导航栏高度 = 胶囊下距离 + 胶囊上距离 - 状态栏高度
				customBar = menu.bottom + menu.top - statusBar
				// #endif
				
				// #ifdef MP-ALIPAY
				customBar = statusBar + e.titleBarHeight
				// #endif
				
				// 由于globalData在vue3 setup存在兼容性问题，改为provide/inject替代
				provide('globalData', {
					statusBarH: statusBar,
					customBarH: customBar,
					screenWidth: e.screenWidth,
					screenHeight: e.screenHeight,
					platform: e.platform
				})
			}
		})
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	@import 'static/fonts/iconfont.css';
	/* #endif */
	/* 隐藏系统Tabbar */
	.uni-app--showtabbar .uni-tabbar-bottom {display: none;}
</style>
<style lang="scss">
	@import 'styles/reset.scss';
	@import 'styles/layout.scss';
</style>

uniapp自定义顶部导航栏+底部菜单栏

uni-vue3-wetrip项目顶部导航条和底部菜单栏均使用自定义组件实现功能。

底部Tabbar支持背景模糊毛玻璃效果。

• 顶部导航条参数配置

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,
})

• 底部菜单栏参数配置

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: () => []
    }
})

uni-app+vue3酒店预订模块

酒店预订模块展示了包括酒店名称、地址、入住/离店日期、星级、酒店设施、客房类型及价格等。通过精美的界面设计和良好的布局，让用户可以快速的查找酒店，方便用户进行选择。

<!-- 日历 -->
<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',
    },
])

vue3+uniapp聊天消息模块

uniapp-vue3trip系统不仅具备基本的酒店预订功能，还集成了消息聊天功能模块，提升了用户体验和互动性。

由于之前有开发一个uniapp+vue3实战微信app聊天实例，这里就不过多介绍，感兴趣的可以去看看下面这篇分享文章。

juejin.cn/post/736312…

底部聊天输入框支持h5/小程序端/app端，已经免费发布到插件市场，欢迎下载使用~

ext.dcloud.net.cn/plugin?id=1…

ok，以上就是uniapp+vue3实战开发一款轻量级酒店预订app系统的一些知识分享。

无论是大型连锁酒店还是小型民宿，都可以通过uniapp+vue3技术快速搭建起自己的h5+小程序+app预订系统，提升服务质量和用户体验。

juejin.cn/post/741066…

juejin.cn/post/740431…

juejin.cn/post/738921…