首页手记基于vue3+uni-app纯手撸跨平台酒店预订app模板

基于vue3+uni-app纯手撸跨平台酒店预订app模板

标签：

WebApp Vue.js 移动开发

自创多端新作uniapp+vite5+pinia2+uni-ui仿携程酒店预订app实例UniVue3Trip。

vue3-uni-wetrip自研uni-app+vite5+pinia2+uv-ui技术实战仿同程/携程酒店预订App系统，支持编译H5、小程序和App端，能够在不同平台上提供一致的用户体验。

运用技术

开发工具：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端

项目特性

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

目前uniapp-vue3-trip项目已经同步到我的原创作品集。
https://gf.bilibili.com/item/detail/1107519011

如上图：亲测支持编译到H5+小程序+App端。

公共模板

<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自定义组件

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

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