为什么国内的uniapp一直没人讨论呢？
最近一直在捣鼓uniapp+vue3跨端开发，花了两周开发了一款uniapp+vue3+vite5+pinia2+uvui跨平台仿去哪儿/携程预约酒店app应用模板Uniapp-Vue3Trop。
Uniapp-Vue3-WeTrip一款纯手撸简易酒店预订系统，提供了首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。
使用技术
- 编辑器：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-wetrip已经发布到我的原创作品集。
uniapp+vue3+pinia2+uvui跨多端酒店预订app系统
项目结构目录
使用HbuilderX 4.36编辑器开发，采用vue3 setup语法编码。
uni-vue3-trip布局模板
整个项目分为顶部导航条+内容区+底部菜单栏三个部分。
<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>
vue3+uniapp自定义组件
顶部导航条和底部菜单栏都是使用自定义组件实现功能。
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预订模块
<!-- 日历 -->
<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',
},
])
Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
flutter3-dylive仿抖音App实例|Flutter3+Getx实战短视频直播应用
综上所述，使用Uniapp+Vue3开发酒店预订系统模板凭借其先进的技术栈和丰富的功能特点，已经成为许多开发者的首选。无论是大型连锁酒店还是小型民宿，都可以通过这些模板快速搭建起自己的预订系统，提升服务质量和用户体验。
