当前位置:首页 > 每日看点 > 正文内容

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

卡卷网1年前 (2024-12-12)每日看点507

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

扫描二维码推送至手机访问。

版权声明:本文由卡卷网发布,如需转载请注明出处。

本文链接:https://www.kajuan.net/ttnews/2024/12/4063.html

分享给朋友:

相关文章

逾期后支付宝微信被冻结,显示执保该怎么办?

这几天有朋友问我说,他的微信零钱突然的用不了,问我是不是被冻结了,问我该怎么办?是不是被起诉了?这个,那个,别慌,别慌,还是那句老话:有钱就去协商,没钱只能暂时不管!但是真不管,这个被冻结的微信怎么办呢?今天针对这个问题,我就给大家做一哥比...

怎么用游戏搬砖挣钱呢?

怎么用游戏搬砖挣钱呢?

今天,我把我多年操作的经验分享出来,以供各位老板们学习借鉴,胆小的老板就离开吧,心里承受能力太弱了,会刷新你的认知的。有些新人在计算收益的时候,会以机器数来计算,其实是有误区的,比如,一台机器一个月搞400元,平均每天搞13元钱,搞上100...

Layui 不更新了么?

Layui 不更新了么?

layui2.8已经于今天正式发布了,新增优化了大量特性,这里按照layui更新日志的模块结构,详细为你一一介绍。基础风格调整新版调整主色调为#16baaa,在原有的墨绿基础上赋予了清新。更简单的构建构建代码更简单,除字体外,只有js和cs...

内存和硬盘的单位都是G,两者的功能是什么?谁能用简单通俗的方式来解读一下?

内存和硬盘的单位都是G,两者的功能是什么?谁能用简单通俗的方式来解读一下?

要弄清楚这个问题,首先要弄清楚什么是内存,什么是硬盘,在计算机的组成结构中有一个很重要的部分是存储器。它是用来存储程序和数据的部件。对于计算机来说,有了存储器,才有记忆功能,,才能保证正常工作。存储器的种类很多。按其用途可分为主存储器与辅助...

抖音和快手最大的区别是什么?

1、目标人群定位不同抖音:一二线城市,占比52%,大专学历以上,女性偏多。抖音以年轻群体居多。快手:三四线城市,占比64%,高中学历以下,男女更均衡。快手所覆盖的年龄段范围更广。2、内容创作的形式和深度不同抖音:偏深层,内容的装饰及表达更高...

天涯神帖,第一神帖是什么?

天涯神帖,第一神帖是什么?

一些个人觉得比较经典的天涯神贴(更新进去了):话说1999年那会儿,中国的互联网还是个小婴儿,BAT三巨头都还在穿开裆裤呢,天涯社区就已经悄然诞生了。时光飞逝,到了2007年,这小小社区竟然已经吸引了超过2000万的注册用户,不得不说是个小...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。