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

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

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

最近一直在捣鼓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

分享给朋友:

相关文章

Photoshop 有哪些使用技巧?

Photoshop 有哪些使用技巧?

不看后悔系列!本篇分享25个PS实用的技巧!不能保证每个都能让你惊艳,但是却是我用心写出来的,希望对你有帮助。另外我的知乎也写了接近200篇PS的技巧,超级合集分享!分享25个关于PS的技巧一、快速制作文字倒影1、新建文档,1500×100...

拼多多,怎么就成为了年轻人的「赛博菜市场」?

拼多多,怎么就成为了年轻人的「赛博菜市场」?

可惜你不在拼多多买水果蔬菜,很难一句话跟你解释,我只能笨拙的用经历来慢慢讲。我们公司有微波炉,同事们几乎都是自己带饭来上班,便当荤素搭配、水果零食;都是好看又好吃。我自己本来就不喜欢外卖,当然也加入了带饭大军: 直到某一天深夜我闲着无聊刷了...

夸克浏览器受欢迎的原因是什么?

夸克浏览器受欢迎的原因是什么?

这是可以说的嘛~哈哈,它比较吸引我的几点是:安全无广、页面简洁、功能丰富、反应速度快......首页页面支持自定义,喜欢什么样子都可以自己调整,没有花里胡哨的各种资讯推送,热搜日报整理归纳好,想看再点开查看,看着舒适度直接拉满!实用日常工具...

为什么不建议买游戏本?

我建议厂家改名厂家犯了个巨大错误:游戏本的主要受众是在校大学生,但大学生买电脑的买单人是他们的父母。你让父母给孩子买个游戏本,父母怎么想?如果你改成高效学习本、优质学习本、智能学习本、高速学习本,甚至硕博连读本,你看看家长舍不舍得砸这个钱...

你们发文章的插图都是从哪来的?在网上搜出来的图能用吗?

你们发文章的插图都是从哪来的?在网上搜出来的图能用吗?

写文章发帖子,里面的插图尽量自己画,自己编辑,避免引起版权或者所有权纠纷。我写过6本书,在知乎上也写了4000篇帖子和文章,其中的插图都是自己绘制的,照片绝大多数是自己拍摄的,摘自技术样本的图则必须加以说明。自己制图,看似麻烦,但积少成多,...

曾经很火的迅雷,为什么现在不怎么火了?

曾经很火的迅雷,为什么现在不怎么火了?

3年前,迅雷推出了一项服务,只要2899元就可以享受迅雷终身会员。这个终身会员和付费会员没有区别,付费会员的离线加速、云空间等服务,终身会员都具备。除此之外,终身会员可以在使用1年后就可以全额退款,使用2年后也可以全额退款,使用5年后也是如...

发表评论

访客

看不清,换一张

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