当前位置:首页 > 每日看点

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

卡卷网2年前 (2024-12-12)每日看点584

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

分享给朋友:

相关文章

天涯论坛关闭后,除了知乎,大家都在逛什么?

天涯论坛关闭后,除了知乎,大家都在逛什么?

天涯神贴合集完整版,给大家整理好了! 那年大学,打开天涯,感觉打开了一片新天地,里面什么样的人都有,有大神也有蛇神,比某乎好太多了,可惜后面关了很多年前,天涯社区曾出现了不少深受欢迎的帖子,成功地预言了许多形势和事件。这些帖子因此被冠以“天…

自媒体如何快速起步?

自媒体如何快速起步?

有两种经验,可供参考。 第一种是:现象级的爆火、爆款,这种情况捞到钱,实现财务自由的人并不多,但确实存在。只不过非要说清楚为什么这个账号可以火、可以短时间内赚到普通人一辈子赚不到的钱,他们自己也不一定能说清楚,因为赶上了风口(内外部情况)。…

2024,java开发,已经炸了吗?

炸的透透的了,坐标南京。 一月底,一个好哥们,双休朝九晚六不加班18K,被裁。 入职不到两年,算是工资和年终奖才赔了6.5W左右。 上周五新公司入职,周六开始加班。现在每周134加班到晚上八点,好像薪资还不如以前高。三月上旬,另一个好哥们,…

用红米手机会很丢人吗?

前些日子遇到了一位快递小哥,京东的,签收 小哥年纪不算大,目测二十多岁 他的手机上全是一道道极严重的划痕,有点卡, 他开热点了,热点名就是手机型号,红米9a,我父母的同款 现在他那边操作了一会,然后又是我这边操作了一会 小哥看着我手机刷刷的…

什么样的网站能快速捕获你的心?

什么样的网站能快速捕获你的心?

大家好,我是程序员鱼皮。 大家如果平时使用网站或产品时出现了问题,一般都会去寻找 “联系客服” 的位置,从而获得人工的帮助。我们团队的面试刷题产品 - 面试鸭最近就遇到了这样一个难题:明明我们网站右下角就有联系客服按钮、而且我们每道面试题目…

为什么闲鱼越做越差?

理想的闲鱼:卖家视角:4000块钱买的手机,用了半年不想用了,挂一个3000块,和买家一顿交流,最后2500块成交,我得到了回血,买家得到了便宜; 买家视角:想用一台4000块的手机,但是手里只有2500块,来到闲鱼和卖家一顿交流,最后25…

发表评论

访客

看不清,换一张

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