卡卷网
当前位置:卡卷网 / 每日看点 / 正文

为什么国内的uniapp一直没人讨论呢?

作者:卡卷网发布时间:2024-12-12 00:28浏览数量:379次评论数量:0次

最近一直在捣鼓uniapp+vue3跨端开发,花了两周开发了一款uniapp+vue3+vite5+pinia2+uvui跨平台仿去哪儿/携程预约酒店app应用模板Uniapp-Vue3Trop。

为什么国内的uniapp一直没人讨论呢?  第1张

Uniapp-Vue3-WeTrip一款纯手撸简易酒店预订系统,提供了首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。

为什么国内的uniapp一直没人讨论呢?  第2张

为什么国内的uniapp一直没人讨论呢?  第3张

为什么国内的uniapp一直没人讨论呢?  第4张

使用技术

  • 编辑器: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一直没人讨论呢?  第5张

为什么国内的uniapp一直没人讨论呢?  第6张

uniapp-vue3-wetrip已经发布到我的原创作品集。
uniapp+vue3+pinia2+uvui跨多端酒店预订app系统

为什么国内的uniapp一直没人讨论呢?  第7张

为什么国内的uniapp一直没人讨论呢?  第8张

项目结构目录

使用HbuilderX 4.36编辑器开发,采用vue3 setup语法编码。

为什么国内的uniapp一直没人讨论呢?  第9张

为什么国内的uniapp一直没人讨论呢?  第10张

为什么国内的uniapp一直没人讨论呢?  第11张

为什么国内的uniapp一直没人讨论呢?  第12张

为什么国内的uniapp一直没人讨论呢?  第13张

为什么国内的uniapp一直没人讨论呢?  第14张

为什么国内的uniapp一直没人讨论呢?  第15张

为什么国内的uniapp一直没人讨论呢?  第16张

为什么国内的uniapp一直没人讨论呢?  第17张

为什么国内的uniapp一直没人讨论呢?  第18张

为什么国内的uniapp一直没人讨论呢?  第19张

为什么国内的uniapp一直没人讨论呢?  第20张

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>

为什么国内的uniapp一直没人讨论呢?  第21张

为什么国内的uniapp一直没人讨论呢?  第22张

为什么国内的uniapp一直没人讨论呢?  第23张

为什么国内的uniapp一直没人讨论呢?  第24张

vue3+uniapp自定义组件

为什么国内的uniapp一直没人讨论呢?  第25张

为什么国内的uniapp一直没人讨论呢?  第26张

顶部导航条和底部菜单栏都是使用自定义组件实现功能。

为什么国内的uniapp一直没人讨论呢?  第27张

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一直没人讨论呢?  第28张

为什么国内的uniapp一直没人讨论呢?  第29张

为什么国内的uniapp一直没人讨论呢?  第30张

uniapp+vue3预订模块

为什么国内的uniapp一直没人讨论呢?  第31张

为什么国内的uniapp一直没人讨论呢?  第32张

为什么国内的uniapp一直没人讨论呢?  第33张

<!-- 日历 --> <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一直没人讨论呢?  第5张

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开发酒店预订系统模板凭借其先进的技术栈和丰富的功能特点,已经成为许多开发者的首选。无论是大型连锁酒店还是小型民宿,都可以通过这些模板快速搭建起自己的预订系统,提升服务质量和用户体验。

END

免责声明:本文由卡卷网编辑并发布,但不代表本站的观点和立场,只提供分享给大家。

卡卷网

卡卷网 主页 联系他吧

请记住:卡卷网 Www.Kajuan.Net

欢迎 发表评论:

请填写验证码