uni-vue3-trip：基於uniapp+vite5+pinia2跨端預訂酒店app系統

歷經兩週擼一個爆款h5+小程式+App酒店預訂app程式模板UniVue3Hotel。

vue3-uniapp-wetrip原創uniapp+vite5+pinia2+uni-ui等技術仿同程/攜程預約酒店app例項。支援編譯H5、小程式和App端，能夠在不同平臺上提供一致的使用者體驗。

uni-vue3-trip不僅具備基本的酒店預訂功能，還整合了訊息聊天功能模組，提升了使用者體驗和互動性。

uniapp+vue3跨多端酒店預訂app系統已經發布到我的原創作品集。
https://gf.bilibili.com/item/detail/1107519011

技術棧

• 跨端框架：Uniapp + Vue3
• 構建工具：Vite5
• 狀態管理：Pinia2
• UI元件庫：uni-ui + uv-ui
• 快取技術：pinia-plugin-unistorage

專案結構和開發工具

HbuilderX 4.36
HbuilderX是一款強大的開發工具，特別適用於Uniapp專案的開發。它提供了豐富的功能和良好的使用者體驗。

公共佈局模板

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

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

vue3+uniapp實現自定義頂部導航/底部選單欄

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

vue3+uniapp預訂模板

豐富的酒店資訊展示：包括酒店名稱、地址、星級、酒店設施、客房型別及價格等。

支援自定義開始/結束日期、日期區間、日期自定義打點資訊。

<!-- 日曆 -->
<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>

uniapp+vue3聊天功能

聊天這部分由於之前有開發一款uniapp+vue3聊天app例項，就不作過多的介紹，如果感興趣可以去看看下面這篇文章。
https://www.cnblogs.com/xiaoyan2017/p/18165578

聊天編輯框也免費釋出到了uniapp外掛市場，歡迎下載使用。

https://ext.dcloud.net.cn/plugin?id=13275

綜上就是uniapp+vue3實戰開發一款酒店預訂app例項的一些分享，希望對大家有些幫助~

https://segmentfault.com/a/1190000045381943
https://segmentfault.com/a/1190000045487385
https://segmentfault.com/a/1190000045331960
https://segmentfault.com/a/1190000045245775
https://segmentfault.com/a/1190000044899693