HTML5+ - 文章 - DCloud问答

基于vue3.5+vite7.1+tauri2.9实战桌面端后台管理系统

vue.js vite vue3 Vue

vue3-tauri2-admin：最新研发vite7.1+tauri2.9+vue3 setup+pinia3+elementPlus跨平台电脑端中后台管理系统Exe模板。包含了表格、图表、表单、列表、编辑器、错误处理等模块。

使用技术

开发工具：VScode
跨平台框架：Tauri^2.9
前端技术框架：vite^7.1.12+vue^3.5.22+vue-router^4.6.3
组件库：element-plus^2.11.5
状态管理：pinia^3.0.3
国际化方案：vue-i18n^11.1.12
图表组件：echarts^6.0.0
markdown编辑器：md-editor-v3^6.1.0
富文本编辑器：@vueup/vue-quill^1.2.0
模拟数据：mockjs^1.1.0

项目结构目录

使用最新跨平台技术tauri2.9+vue3搭建项目模板页面。

tauri2-vue3admin客户端后台系统已经更新到我的原创作品集。
tauri2.9+vue3+element-plus客户端后台系统EXE

如果想要了解更多详细介绍，可以去看看下面这篇文章。

Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统

继续阅读 »

基于vue3.5+vite7.1+tauri2.8实战客户端聊天软件

vite vue.js vue3

vue3-tauri2-wechat：最新研发vite7.1+tauri2.8+vue3 setup+pinia3+elementPlus跨平台仿微信/QQ风格桌面聊天系统Exe模板。包含聊天、通讯录、收藏、朋友圈、短视频、我的等板块。

运用技术

跨平台框架：tauri2.8
前端技术框架：vite^7.1.10+vue^3.5.22+vue-router^4.6.3
状态管理：pinia^3.0.3
本地存储：pinia-plugin-persistedstate^4.5.0
组件库：element-plus^2.11.5
富文本编辑器：@vueup/vue-quill^1.2.0
样式预处理：sass^1.93.2
短视频滑动插件：swiper^12.0.2

项目框架目录

基于最新版跨平台框架tauri2+vite7创建项目模板，vue3 setup语法开发。

tauri2-vue3chat聊天系统已经更新到我的原创作品集。
Tauri2.0+Vite7+ElementPlus桌面聊天Exe程序

继续阅读 »

基于vue3.5+vite7+electron38.2实战电脑端os管理系统

vue3 vue.js

vue3-electron38-os：最新原创vite7.1+electron38.2+vue3 setup+pinia3+arcoDesign+echarts跨平台仿macOS/windows风格桌面os管理系统模板。自研可拖拽栅格布局结构、自定义JSON配置桌面菜单/Dock菜单。

使用技术

跨平台框架：electron^38.2.0
前端技术框架：vite^7.1.7+vue^3.5.21+vue-router^4.5.1
组件库：@arco-design/web-vue^2.57.0 (字节前端vue3组件库)
状态管理：pinia^3.0.3
拖拽插件：sortablejs^1.15.6
图表组件：echarts^6.0.0
markdown编辑器：md-editor-v3^6.0.1
模拟数据：mockjs^1.1.0
打包构建：electron-builder^24.13.3
electron+vite插件：vite-plugin-electron^0.29.0

项目结构目录

使用最新版跨平台框架electron38+vite7创建项目模板，vue3 setup语法开发。

electron-vue3-os桌面端os项目已经同步到我的原创作品集。
electron38+vue3+arco-design客户端os系统

继续阅读 »

原创vue3.5+vite7.1+electron38.1桌面客户端后台系统admin模板

vite vue.js vue3

vue3-electron38-admin：基于vite7.0+vue3 setup+electron38+pinia3+element-plus+mockjs+echarts等技术构建的桌面电脑端admin后台系统。支持4种常用布局模板，支持vue-i18n多语言、标签栏路由，集合了图表、表格、表单、列表、编辑器等功能。

使用技术

前端技术栈：vite^7.1.7+vue^3.5.21+vue-router^4.5.1
跨平台框架：electron^38.1.2
组件库：element-plus^2.11.3
状态管理：pinia^3.0.3
国际化方案：vue-i18n^11.1.12
图表组件：echarts^6.0.0
markdown编辑器：md-editor-v3^6.0.1
模拟数据：mockjs^1.1.0
打包工具：electron-builder^24.13.3
electron+vite整合插件：vite-plugin-electron^0.29.0

项目结构目录

使用最新跨平台技术Electron38.x结合Vite7.x创建项目模板。

electron38-viteadmin桌面端后台管理系统已经同步到我的原创作品铺。
Electron38+Vue3+ElementPlus桌面端后台管理系统

继续阅读 »

基于vue3+vite7+arco-design网页版webos管理系统

vue3 vite

vue3-vite7-webos：一款最新前端技术栈vite7.0+vue3 setup+pinia3+arco.design+mockjs+echarts等技术构建的仿macOS/windows风格网页版os后台系统。支持自定义桌面栅格模板、可拖拽栅格菜单/dock菜单等功能。

使用技术

技术框架：vite7.1.2+vue3.5.18+vue-router4.5.1+pinia3
组件库：arco-design^2.57.0 (字节桌面版vue3组件库)
状态管理：pinia^3.0.3
图表插件：echarts^6.0.0
拖拽组件：sortablejs^1.15.6
富文本编辑器：wangeditor^4.7.15
模拟数据：mockjs^1.1.0
样式编译：sass^1.92.1
构建工具：vite^7.1.2

项目框架目录

使用最新前端构建工具vite7.0搭建项目，vue3 setup语法编码开发页面。

vite7-vue3os网页版os系统已经更新到我的原创作品集。

vite7+vue3+arco-design仿macOS网页版os管理系统

继续阅读 »

vue3.5+electron35+deepseek-v3+arco搭建桌面版AI模板

2025最新跨平台AI落地实战：基于Vue3.5+Electron35+DeepSeek+Vite6+ArcoDesign从0-1打造一款高性能桌面AI流式对话模板。

前段时间有分享两个vue3+deepseek实战mobile版和PC版智能ai对话模板。
Vue3-DeepSeek-Chat流式AI对话|vite6+vant4+deepseek智能ai聊天助手
 vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果

使用技术

编码工具：VScode
技术框架：vite^6.2.0+vue^3.5.13+vue-router^4.5.0
大模型ai框架：DeepSeek-V3-0324 + OpenAI
跨平台框架：electron^35.1.2
组件库：arco-design^2.57.0 (字节桌面端组件库)
状态插件：pinia^3.0.1
会话缓存：pinia-plugin-persistedstate^4.2.0
高亮插件：highlight.js^11.11.1
markdown解析：markdown-it

项目结构框架

electron-deepseek客户端AI系统已经发布到我的原创作品集，感谢支持！
electron35+deepseek+vite6桌面端AI流式聊天对话

整个项目使用最新跨平台框架Electron35和Vite6构建项目模板，接入最新DeepSeek-v3聊天大模型框架。

目前该项目已经正式完结，想要了解更多技术实现细节，可以看看下面这篇分享文章。

Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板

作者：xiaoyan2017
链接： https://segmentfault.com/a/1190000046461214
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

继续阅读 »

vue3.5+deepseek-v3多轮流式AI对话助手

vite vue3

2025实战ai开发vue3.5整合deepseek-v3搭建一款仿DeepSeek/ChatGPT网页版流式聊天AI对话模板。
集成 Vite6 对接 DeepSeek-V3 API 流式打字输出对话大模型。支持上下文多轮对话、代码高亮、本地缓存，亮色+暗黑主题。

使用技术

技术框架：vite^6.2.0+vue^3.5.13+vue-router^4.5.0
AI框架：DeepSeek-R1 + OpenAI
组件库：arco-design^2.57.0 (字节桌面端组件库)
状态管理：pinia^3.0.1
本地存储：pinia-plugin-persistedstate^4.2.0
高亮插件：highlight.js^11.11.1
markdown解析：markdown-it

项目特色

流式响应：Vue3+DeepSeek实现逐行打字输出效果
丝滑极速：基于Vite6构建，接入DeepSeek，性能更优，聊天丝滑流畅
特色功能：支持各种代码高亮，利于展示和分享代码片段、支持暗黑+亮色主题模式
风格：采用arco-design组件库，风格统一，美观大气

项目框架结构

想要了解更多的技术实现细节可以去参考下面这篇分享文章。
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果

继续阅读 »

记：安卓端长按选择文本后无法弹出复制等按钮，而IOS有

因为参照默认的项目开发，把这个加在了全局js里面，而导致安卓端按钮无法显示

document.oncontextmenu = function() {  
    return false;  
};

同时如果有需要禁用文本复制的也可以增加这个，IOS可以配合css user-select: none 来禁用

继续阅读 »

因为参照默认的项目开发，把这个加在了全局js里面，而导致安卓端按钮无法显示

document.oncontextmenu = function() {  
    return false;  
};

同时如果有需要禁用文本复制的也可以增加这个，IOS可以配合css user-select: none 来禁用

收起阅读 »

H5 app 安卓应用连接蓝牙打印机打印标签

打印蓝牙 h5+

H5 app 安卓应用连接蓝牙打印机打印标签

项目需求：

商超类管理端APP（H5 ）能够连接蓝牙打印机，打印促销价签。

个人说明：

1、前端水平为入门级。
2、第一次搞硬件对接。

所以写的内容可能很基础，或者有错误。欢迎各位大佬指正。

开发思路：

本人负责从该功能的设计，数据库、后端、前端的所有开发。
首先需要验证H5 项目是否能够链接驱动打印机。
验证成功后再进行其他开发。
本文主要介绍：H5 项目的蓝牙打印机验证。

项目研究及同类搜索：

客户发过来的蓝牙打印机是芝柯便携式打印机 CC3 。

1、商家技术支持：商家拉了一个技术对接群。发了一个500M左右的技术支持包。
问有没有相关的demo。答：“里面您自己找下，有的话就有，没有就没有了”。
这个群最后一句话是“明天这边反馈下厂家开发”。
所以商家基本上没有支持（没错，就是在吐槽）。

2、同类搜索：在mui 及其他网站搜索 “H5 蓝牙打印机”。找到了六七个项目下载后挨个测试使用。
发现有些是H5WEB项目，有些是vue项目。符合要求的有三个。
==CSDN 搜包小弟快递（优点：在同一个页面进行蓝牙配对、）
==雨滴科技蓝牙打印Demo https://ask.dcloud.net.cn/article/38125 buleprintDemo.zip（优点：能够自动连接已保存蓝牙）
==CSDN 搜 html5-bluetooth-HBuilderX（优点：丰富的操作）

经测试后发现有些问题无法解决。
如：Uncaught java.lang.SecurityException: Need android.permission.BLUETOOTH_SCAN permission for android.content.AttributionSource@8a1bcf4c: Starting discovery.;at android.bluetooth.BluetoothAdapter.startDiscovery at printer.html:1

很多文章下也有这个提问，但是暂无回答。后来解决后我也尽量去相关问题下回答了。

根据我的需求和各个例子的功能，最后选择了在雨滴科技蓝牙打印demo 上进行修改应用。

改进的地方

1、已经在manifast中添加了相关权限，但还是在搜索蓝牙时报错Need android.permission.

var permissions = [  
                        "android.permission.BLUETOOTH",  
                        "android.permission.BLUETOOTH_ADMIN",  
                        "android.permission.BLUETOOTH_SCAN",  
                        "android.permission.BLUETOOTH_CONNECT"  
                    ];  
                    plus.android.requestPermissions(  
                        permissions,  
                        function(result) {  
                            // 权限申请成功后的回调  
                            console.log("权限申请成功");  
                        },  
                        function(error) {  
                            console.error("权限申请失败："   error.message);  
                        }  
                    );

2、搜索蓝牙有大量重复，需要去重。

// 防止重复出现  
                    if (JSON.stringify(BleDeviceObjAry).indexOf(JSON.stringify(BleDevice)) != -1) {  
                        console.log("重复");  
                    } else {  
                        console.log("增加");  
                        BleDeviceObjAry.push(BleDevice);  
                        self.SetpairedListHtml(unpairedList, bleName, bleId);  
                    }

3、页面没有蓝牙连接标志。

<script type="text/javascript" src="js/jquery.min.js"></script>  
$('#J_printer_status').val('打印机已就绪');  
$('#J_printer_status').css('color', 'green');

4、第一次链接失败后，在连接还是失败。Uncaught java.io.IOException: read failed, socket might closed or timeout, read ret: -1;at android.bluetooth.BluetoothSocket.connect at index.html:1

if(!bluetoothSocket.isConnected()) {  
            try{  
                bluetoothSocket.connect();  

            }catch(e){  
                // $('#J_printer_status').val(data.value);  
                bluetoothSocket.close();  
                $('#J_printer_status').val('打印机未连接')  
                $('#J_printer_status').css('color', 'red');  
                localStorage.setItem("printer_status", "N");  
                console.log(e)  
                return;  
            }  

        }

5、增加按钮，能够手动进入打印机配对界面

6、修改label_set_page 方法，能够传入打印数量

欢迎指正并一起讨论学习

继续阅读 »

H5 app 安卓应用连接蓝牙打印机打印标签

项目需求：

商超类管理端APP（H5 ）能够连接蓝牙打印机，打印促销价签。

个人说明：

1、前端水平为入门级。
2、第一次搞硬件对接。

所以写的内容可能很基础，或者有错误。欢迎各位大佬指正。

开发思路：

本人负责从该功能的设计，数据库、后端、前端的所有开发。
首先需要验证H5 项目是否能够链接驱动打印机。
验证成功后再进行其他开发。
本文主要介绍：H5 项目的蓝牙打印机验证。

项目研究及同类搜索：

客户发过来的蓝牙打印机是芝柯便携式打印机 CC3 。

1、商家技术支持：商家拉了一个技术对接群。发了一个500M左右的技术支持包。
问有没有相关的demo。答：“里面您自己找下，有的话就有，没有就没有了”。
这个群最后一句话是“明天这边反馈下厂家开发”。
所以商家基本上没有支持（没错，就是在吐槽）。

2、同类搜索：在mui 及其他网站搜索 “H5 蓝牙打印机”。找到了六七个项目下载后挨个测试使用。
发现有些是H5WEB项目，有些是vue项目。符合要求的有三个。
==CSDN 搜包小弟快递（优点：在同一个页面进行蓝牙配对、）
==雨滴科技蓝牙打印Demo https://ask.dcloud.net.cn/article/38125 buleprintDemo.zip（优点：能够自动连接已保存蓝牙）
==CSDN 搜 html5-bluetooth-HBuilderX（优点：丰富的操作）

经测试后发现有些问题无法解决。
如：Uncaught java.lang.SecurityException: Need android.permission.BLUETOOTH_SCAN permission for android.content.AttributionSource@8a1bcf4c: Starting discovery.;at android.bluetooth.BluetoothAdapter.startDiscovery at printer.html:1

很多文章下也有这个提问，但是暂无回答。后来解决后我也尽量去相关问题下回答了。

根据我的需求和各个例子的功能，最后选择了在雨滴科技蓝牙打印demo 上进行修改应用。

改进的地方

1、已经在manifast中添加了相关权限，但还是在搜索蓝牙时报错Need android.permission.

var permissions = [  
                        "android.permission.BLUETOOTH",  
                        "android.permission.BLUETOOTH_ADMIN",  
                        "android.permission.BLUETOOTH_SCAN",  
                        "android.permission.BLUETOOTH_CONNECT"  
                    ];  
                    plus.android.requestPermissions(  
                        permissions,  
                        function(result) {  
                            // 权限申请成功后的回调  
                            console.log("权限申请成功");  
                        },  
                        function(error) {  
                            console.error("权限申请失败："   error.message);  
                        }  
                    );

2、搜索蓝牙有大量重复，需要去重。

// 防止重复出现  
                    if (JSON.stringify(BleDeviceObjAry).indexOf(JSON.stringify(BleDevice)) != -1) {  
                        console.log("重复");  
                    } else {  
                        console.log("增加");  
                        BleDeviceObjAry.push(BleDevice);  
                        self.SetpairedListHtml(unpairedList, bleName, bleId);  
                    }

3、页面没有蓝牙连接标志。

<script type="text/javascript" src="js/jquery.min.js"></script>  
$('#J_printer_status').val('打印机已就绪');  
$('#J_printer_status').css('color', 'green');

4、第一次链接失败后，在连接还是失败。Uncaught java.io.IOException: read failed, socket might closed or timeout, read ret: -1;at android.bluetooth.BluetoothSocket.connect at index.html:1

if(!bluetoothSocket.isConnected()) {  
            try{  
                bluetoothSocket.connect();  

            }catch(e){  
                // $('#J_printer_status').val(data.value);  
                bluetoothSocket.close();  
                $('#J_printer_status').val('打印机未连接')  
                $('#J_printer_status').css('color', 'red');  
                localStorage.setItem("printer_status", "N");  
                console.log(e)  
                return;  
            }  

        }

5、增加按钮，能够手动进入打印机配对界面

6、修改label_set_page 方法，能够传入打印数量

欢迎指正并一起讨论学习

收起阅读 »

vue3+vite6+vant4仿deepseek/chatgpt流式ai聊天会话

vite vue3

基于vue3+deepseek实战纯撸一款仿DeepSeek/ChatGPT流式聊天AI对话聊天。
集成Vue3 对接 DeepSeek Web API 流式打字输出对话大模型。支持代码高亮、本地缓存，支持移动端+PC端完美显示。

项目结构

特性

流式响应：逐字显示 AI 回复，提供更好的用户体验
优雅的 UI 设计：
- 气泡式对话界面
- 打字机效果
- 平滑的动画过渡
- 响应式布局

想要了解更多的技术实现细节可以去参考下面这篇分享文章。
Vue3-DeepSeek流式AI聊天|vite6+vant4+deepseek智能ai对话助手

继续阅读 »

15天纯手撸flutter3.27预约酒店app应用

flutter

前段时间有分享一款Uniapp+vue3跨端仿携程app酒店预订。这次带来全新研发的Flutter3.27跨平台旅行预约酒店app应用。

uni-app+vue3酒店预订app模板|uniapp+pinia2+uv-ui仿携程

效果如下

使用技术

编辑器：Vscode
技术框架：Flutter3.27.1+Dart3.6.0
路由/状态管理：get: ^4.6.6
本地缓存：get_storage: ^2.1.1
图片轮播组件：card_swiper^3.0.1
日期选择插件：syncfusion_flutter_datepicker^28.2.5
弹层提示：shirne_dialog^4.8.3
瀑布流组件：flutter_staggered_grid_view^0.7.0
滚动定位组件：scrollable_positioned_list^0.3.8

预订模块包括热门城市列表/位置品牌选择、入住离店日期区间选择、价格/星级选择等功能。

项目结构图

flutter3-trip酒店预订app项目已经发布到我的原创作品小铺。

原创Flutter3.27仿携程app酒店预约系统

再分享三篇之前研发的flutter3跨平台实战项目。

flutter3-dymall：仿抖音直播+短视频商城|Flutter3.27实战抖音app

flutter3-winchat：桌面端聊天实例|Flutter3.x+Dart3+Getx仿微信Exe程序

flutter3-chat：聊天室|Flutter3跨平台仿微信App语音聊天/朋友圈

项目入口文件

import 'dart:io';  
import 'package:flutter/material.dart';  
import 'package:get/get.dart';  
import 'package:get_storage/get_storage.dart';  
import 'package:intl/date_symbol_data_local.dart';  
import 'package:shirne_dialog/shirne_dialog.dart';  

import 'utils/common.dart';  

// 引入布局页面  
import 'layouts/index.dart';  

// 引入路由配置  
import 'router/index.dart';  

void main() async {  
  // 初始化get_storage存储  
  await GetStorage.init();  
  // 初始化国际化语言  
  initializeDateFormatting('zh_CN');  

  runApp(const App());  
}  

class App extends StatelessWidget {  
  const App({super.key});  

  @override  
  Widget build(BuildContext context) {  
    return GetMaterialApp(  
      title: 'Flutter3 Trip',  
      debugShowCheckedModeBanner: false,  
      theme: ThemeData(  
        colorScheme: ColorScheme.fromSeed(seedColor: Color(0xFF006ff6)),  
        useMaterial3: true,  
        // 修正windows下字体不一致情况  
        fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null  
      ),  
      home: const Layout(),  
      // 初始化路由  
      initialRoute: Common.isLogin() ? '/' : '/login',  
      // 路由页面  
      getPages: routePages,  
      // 初始化弹窗key  
      navigatorKey: MyDialog.navigatorKey,  
    );  
  }  
}

flutter3自定义一个滚动指示器

如下图：实现一个滚动指示槽组件。

采用 SingleChildScrollView 和 Stack 组件实现功能。

late ScrollController indicatorController = ScrollController();  
// 滚动位置  
double indicatorOffset = 0;  

@override  
void initState() {  
  super.initState();  
  indicatorController.addListener(() {  
    setState(() {  
      indicatorOffset = indicatorController.position.pixels / indicatorController.position.maxScrollExtent;  
    });  
  });  
  ...  
}  

Column(  
  children: [  
    Expanded(  
      child: SingleChildScrollView(  
        controller: indicatorController,  
        scrollDirection: Axis.horizontal,  
        child: Row(  
          ...  
        ),  
      ),  
    ),  
    // 指示槽  
    Stack(  
      children: [  
        Container(  
          decoration: BoxDecoration(  
            color: Color(0xFFE1EFFF),  
            borderRadius: BorderRadius.circular(50.0),  
          ),  
          height: 4.0,  
          width: 50.0,  
        ),  
        Container(  
          margin: EdgeInsets.only(left: indicatorOffset * 30.0),  
          decoration: BoxDecoration(  
            color: Color(0xFF006ff6),  
            borderRadius: BorderRadius.circular(50.0),  
          ),  
          width: 20.0,  
          height: 4.0,  
        )  
      ]  
    )  
  ]  
)

flutter3酒店预订模板

酒店日期区间选择，支持设置开始和结束日期，可滑动选择多个日期区间。

// 入住日期  
DateTime startDate = DateTime.now();  
// 离店日期  
DateTime endDate = DateTime.now().add(Duration(days: 1));  

GestureDetector(  
  child: Container(  
    padding: EdgeInsets.all(10.0),  
    decoration: BoxDecoration(  
      border: Border(bottom: BorderSide(color: Color(0xfff5f5f5))),  
    ),  
    child: Row(  
      spacing: 10.0,  
      children: [  
        Icon(Icons.calendar_month_outlined),  
        Expanded(  
          child: Row(  
            mainAxisAlignment: MainAxisAlignment.spaceBetween,  
            children: [  
              Column(  
                crossAxisAlignment: CrossAxisAlignment.start,  
                spacing: 3.0,  
                children: [  
                  Text('入住', style: TextStyle(color: Colors.grey, fontSize: 12.0)),  
                  Text('${DateFormat('MM-dd').format(startDate)} ${DateFormat('E', 'zh_CN').format(startDate)}'),  
                ],  
              ),  
              Container(  
                color: Colors.grey[50],  
                padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 1.0),  
                // DateTime 类提供了 difference 方法，可以计算两个日期之间的时间差，返回一个 Duration 对象。通过 Duration 的 inDays 属性，可以获取天数差。  
                child: Text('共${endDate.difference(startDate).inDays}晚'),  
              ),  
              Column(  
                crossAxisAlignment: CrossAxisAlignment.end,  
                spacing: 3.0,  
                children: [  
                  Text('离店', style: TextStyle(color: Colors.grey, fontSize: 12.0)),  
                  Text('${DateFormat('MM-dd').format(endDate)} ${DateFormat('E', 'zh_CN').format(endDate)}'),  
                ],  
              ),  
            ],  
          ),  
        ),  
        Icon(Icons.arrow_forward_ios_rounded, color: Colors.grey, size: 12.0,)  
      ],  
    ),  
  ),  
  onTap: () {  
    handleCalendar();  
  }  
)

Ok，综上就是flutter3实现酒店预订模板的一些知识分享，希望对大家有些帮助哈~

往期热文

vite6+tauri2.0客户端仿MacOS桌面|tauri2+rust+vue3桌面os
基于uniapp+vite5+pinia2跨端预订酒店app系统
 tauri2.0桌面端后台Exe系统|tauri2+rust+vite5管理系统后台模板
 基于vite5+electron31+elementPlus仿微信聊天Exe
基于uniapp+vue3+uv-ui聊天实例|uni-app+vite4仿微信app应用

作者：xiaoyan2017
链接： https://segmentfault.com/a/1190000046132699
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

继续阅读 »

前段时间有分享一款Uniapp+vue3跨端仿携程app酒店预订。这次带来全新研发的Flutter3.27跨平台旅行预约酒店app应用。

uni-app+vue3酒店预订app模板|uniapp+pinia2+uv-ui仿携程

效果如下

使用技术

编辑器：Vscode
技术框架：Flutter3.27.1+Dart3.6.0
路由/状态管理：get: ^4.6.6
本地缓存：get_storage: ^2.1.1
图片轮播组件：card_swiper^3.0.1
日期选择插件：syncfusion_flutter_datepicker^28.2.5
弹层提示：shirne_dialog^4.8.3
瀑布流组件：flutter_staggered_grid_view^0.7.0
滚动定位组件：scrollable_positioned_list^0.3.8

预订模块包括热门城市列表/位置品牌选择、入住离店日期区间选择、价格/星级选择等功能。

项目结构图

flutter3-trip酒店预订app项目已经发布到我的原创作品小铺。

原创Flutter3.27仿携程app酒店预约系统

再分享三篇之前研发的flutter3跨平台实战项目。

flutter3-dymall：仿抖音直播+短视频商城|Flutter3.27实战抖音app

flutter3-winchat：桌面端聊天实例|Flutter3.x+Dart3+Getx仿微信Exe程序

flutter3-chat：聊天室|Flutter3跨平台仿微信App语音聊天/朋友圈

项目入口文件

import 'dart:io';  
import 'package:flutter/material.dart';  
import 'package:get/get.dart';  
import 'package:get_storage/get_storage.dart';  
import 'package:intl/date_symbol_data_local.dart';  
import 'package:shirne_dialog/shirne_dialog.dart';  

import 'utils/common.dart';  

// 引入布局页面  
import 'layouts/index.dart';  

// 引入路由配置  
import 'router/index.dart';  

void main() async {  
  // 初始化get_storage存储  
  await GetStorage.init();  
  // 初始化国际化语言  
  initializeDateFormatting('zh_CN');  

  runApp(const App());  
}  

class App extends StatelessWidget {  
  const App({super.key});  

  @override  
  Widget build(BuildContext context) {  
    return GetMaterialApp(  
      title: 'Flutter3 Trip',  
      debugShowCheckedModeBanner: false,  
      theme: ThemeData(  
        colorScheme: ColorScheme.fromSeed(seedColor: Color(0xFF006ff6)),  
        useMaterial3: true,  
        // 修正windows下字体不一致情况  
        fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null  
      ),  
      home: const Layout(),  
      // 初始化路由  
      initialRoute: Common.isLogin() ? '/' : '/login',  
      // 路由页面  
      getPages: routePages,  
      // 初始化弹窗key  
      navigatorKey: MyDialog.navigatorKey,  
    );  
  }  
}

flutter3自定义一个滚动指示器

如下图：实现一个滚动指示槽组件。

采用 SingleChildScrollView 和 Stack 组件实现功能。

late ScrollController indicatorController = ScrollController();  
// 滚动位置  
double indicatorOffset = 0;  

@override  
void initState() {  
  super.initState();  
  indicatorController.addListener(() {  
    setState(() {  
      indicatorOffset = indicatorController.position.pixels / indicatorController.position.maxScrollExtent;  
    });  
  });  
  ...  
}  

Column(  
  children: [  
    Expanded(  
      child: SingleChildScrollView(  
        controller: indicatorController,  
        scrollDirection: Axis.horizontal,  
        child: Row(  
          ...  
        ),  
      ),  
    ),  
    // 指示槽  
    Stack(  
      children: [  
        Container(  
          decoration: BoxDecoration(  
            color: Color(0xFFE1EFFF),  
            borderRadius: BorderRadius.circular(50.0),  
          ),  
          height: 4.0,  
          width: 50.0,  
        ),  
        Container(  
          margin: EdgeInsets.only(left: indicatorOffset * 30.0),  
          decoration: BoxDecoration(  
            color: Color(0xFF006ff6),  
            borderRadius: BorderRadius.circular(50.0),  
          ),  
          width: 20.0,  
          height: 4.0,  
        )  
      ]  
    )  
  ]  
)

flutter3酒店预订模板

酒店日期区间选择，支持设置开始和结束日期，可滑动选择多个日期区间。

// 入住日期  
DateTime startDate = DateTime.now();  
// 离店日期  
DateTime endDate = DateTime.now().add(Duration(days: 1));  

GestureDetector(  
  child: Container(  
    padding: EdgeInsets.all(10.0),  
    decoration: BoxDecoration(  
      border: Border(bottom: BorderSide(color: Color(0xfff5f5f5))),  
    ),  
    child: Row(  
      spacing: 10.0,  
      children: [  
        Icon(Icons.calendar_month_outlined),  
        Expanded(  
          child: Row(  
            mainAxisAlignment: MainAxisAlignment.spaceBetween,  
            children: [  
              Column(  
                crossAxisAlignment: CrossAxisAlignment.start,  
                spacing: 3.0,  
                children: [  
                  Text('入住', style: TextStyle(color: Colors.grey, fontSize: 12.0)),  
                  Text('${DateFormat('MM-dd').format(startDate)} ${DateFormat('E', 'zh_CN').format(startDate)}'),  
                ],  
              ),  
              Container(  
                color: Colors.grey[50],  
                padding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 1.0),  
                // DateTime 类提供了 difference 方法，可以计算两个日期之间的时间差，返回一个 Duration 对象。通过 Duration 的 inDays 属性，可以获取天数差。  
                child: Text('共${endDate.difference(startDate).inDays}晚'),  
              ),  
              Column(  
                crossAxisAlignment: CrossAxisAlignment.end,  
                spacing: 3.0,  
                children: [  
                  Text('离店', style: TextStyle(color: Colors.grey, fontSize: 12.0)),  
                  Text('${DateFormat('MM-dd').format(endDate)} ${DateFormat('E', 'zh_CN').format(endDate)}'),  
                ],  
              ),  
            ],  
          ),  
        ),  
        Icon(Icons.arrow_forward_ios_rounded, color: Colors.grey, size: 12.0,)  
      ],  
    ),  
  ),  
  onTap: () {  
    handleCalendar();  
  }  
)

Ok，综上就是flutter3实现酒店预订模板的一些知识分享，希望对大家有些帮助哈~

往期热文

vite6+tauri2.0客户端仿MacOS桌面|tauri2+rust+vue3桌面os
基于uniapp+vite5+pinia2跨端预订酒店app系统
 tauri2.0桌面端后台Exe系统|tauri2+rust+vite5管理系统后台模板
 基于vite5+electron31+elementPlus仿微信聊天Exe
基于uniapp+vue3+uv-ui聊天实例|uni-app+vite4仿微信app应用

作者：xiaoyan2017
链接： https://segmentfault.com/a/1190000046132699
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

收起阅读 »

使用技术

项目结构目录

往期推荐

使用技术

项目结构目录

往期推荐

运用技术

项目框架目录

往期推荐

运用技术

项目框架目录

往期推荐

使用技术

项目结构目录

热文推荐

使用技术

项目结构目录

热文推荐

使用技术

项目结构目录

热文推荐

使用技术

项目结构目录

热文推荐

使用技术

项目框架目录

vite7-vue3os网页版os系统已经更新到我的原创作品集。

热文推荐

使用技术

项目框架目录

vite7-vue3os网页版os系统已经更新到我的原创作品集。

热文推荐

使用技术

项目结构框架

使用技术

项目结构框架

使用技术

项目特色

项目框架结构

使用技术

项目特色

项目框架结构

项目需求：

个人说明：

开发思路：

项目研究及同类搜索：

相关知识：

根据我的需求和各个例子的功能，最后选择了在 雨滴科技蓝牙打印demo 上进行修改应用。

项目需求：

个人说明：

开发思路：

项目研究及同类搜索：

相关知识：

根据我的需求和各个例子的功能，最后选择了在 雨滴科技蓝牙打印demo 上进行修改应用。

项目结构

特性

项目结构

特性

效果如下

使用技术

项目结构图

flutter3-trip酒店预订app项目已经发布到我的原创作品小铺。

再分享三篇之前研发的flutter3跨平台实战项目。

项目入口文件

flutter3自定义一个滚动指示器

flutter3酒店预订模板

往期热文

效果如下

使用技术

项目结构图

flutter3-trip酒店预订app项目已经发布到我的原创作品小铺。

再分享三篇之前研发的flutter3跨平台实战项目。

项目入口文件

flutter3自定义一个滚动指示器

flutter3酒店预订模板

往期热文

热门文章

根据我的需求和各个例子的功能，最后选择了在雨滴科技蓝牙打印demo 上进行修改应用。

根据我的需求和各个例子的功能，最后选择了在雨滴科技蓝牙打印demo 上进行修改应用。