启用低功耗蓝牙设备特征值变化时的 notify 功能 （人话：把这个打开）

deviceId,serviceId,characteristicId这三个值改为你需要回调监听的值

await uni.notifyBLECharacteristicValueChange({  
        state: true,  //设为true  
        deviceId,  
        serviceId,  
        characteristicId,  
})

打开这个监听

这里放一个,

uni.onBLECharacteristicValueChange(function (res) {  
  console.log(`characteristic ${res.characteristicId} has changed, now is ${res.value}`)  
  console.log(ab2hex(res.value))  
})

接下来就是拿这个写入数据

写入一次没用！写入两次第二次监听uni.onBLECharacteristicValueChange中就有数据了

uni.writeBLECharacteristicValue({  
  deviceId,  
  serviceId,  
  characteristicId,  
  value: buffer,  
  success(res) {  
    console.log('writeBLECharacteristicValue success', res.errMsg)  
  }  
})

总结

开启uni.notifyBLECharacteristicValueChange，后放uni.onBLECharacteristicValueChange，然后写入两次 uni.writeBLECharacteristicValue，往后再进行写操作就不用发两次了，初始化第一次时需要发两次

开发要求：
1、请使用uni-app和uni-cloud进行开发，要求使用js开发，不要ts
2、功能界面需要精美，大气（有UI），动画效果需要有质感。
3、界面与交互要求
UI设计需提供完整设计稿（Figma/Sketch/PSD），开发者需按设计还原。
动画效果需流畅且有质感，需增加对动画在低端设备上流畅性的考量。
兼容性：Chrome、Safari、微信内置浏览器。
4、技术方案要求：
前端框架：uni-app（要求使用JavaScript进行开发）可使用其他UI框架
后端服务：uni-cloud阿里云版
支付解决方案：uni-pay
AI聊天：参考uni-ai-chat的流式响应实现（可选），建议结合uni-push2提高用户体验
UI设计：需精美大气，并具有良好的动画质感
兼容性：确保在主流浏览器上的良好表现
5、性能要求：
页面响应延迟需低于1秒。

开发者要求：
1、 至少两年以上uni-app手机端开发经验
2、 使用过uni-cloud，有作品可看
3、 接过2个或以上单子并成功交付

验收标准：
1、所有功能需求实现且无重大BUG。
2、UI设计稿与实现效果一致，动画流畅。
3、通过微信公众号、消息推送等官方审核流程。

交付要求：
1、需交付整套源代码
2、源代码注释详细

报价方式：
总包制（需分阶段付款：30%预付款+40%中期验收+30%交付尾款）。
30%预付款：合同签订后立即支付
40%中期验收：完成核心功能开发并通过内部测试，80%功能
30%交付尾款：所有功能开发完毕并通过最终验收后。
具体交付成果：完整的应用程序源码及其相关资源文件、用户手册和技术文档，涵盖部署指南、API文档等。确保应用程序在主流浏览器上的兼容性，并通过微信公众号平台的所有审核流程
验收标准：
应用程序完全按照需求文档的要求实现了所有功能，不存在重大BUG。
UI设计与最初的设计稿高度一致，动画效果流畅自然。
应用程序已成功上线或准备好上线，所有必要的官方审核均已通过

v：Peter-A-Gao
私信不一定看到，有意向+
UI设计稿签订合同后单独提供。

使用正则判定一下输入的值是否为objectId

如果是就使用查询command.eq( )方式查询

否则就使用test正则校验查询

isValidObjectId(id) {  
        return /^[0-9a-fA-F]{24}$/.test(id);  
      },  

 getWhere() {  
      const query = this.query.trim();  
      if (!query) return '';  

      // 优先处理 _id 精确查询  
      if (this.isValidObjectId(query)) {  
        return { _id: uniCloud.database().command.eq(query) };  
      }  

      // 处理普通字段正则搜索  
      const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');  
      const regex = new RegExp(escapedQuery, 'i');  

      return {  
        $or: dbSearchFields.map(field => ({  
          [field]: regex  
        }))  
      };  
    },

Shiply Android应用内升级功能为开发者提供了一套完整的版本发布管理工具，支持灰度放量和立即全量等发布模式，帮助开发者在确保应用稳定性的同时，高效完成新版本推送。

核心功能亮点

灰度发布能力

• 精准控制：逐步向部分用户推送新版本，降低发布风险
• 智能匹配：基于用户画像、设备特征等维度进行精准下发
• 实时监控：关键指标动态追踪，确保发布过程可控

全量升级支持

• 一键推送：快速完成全量用户版本覆盖
• 强制更新：确保关键版本及时渗透
• 版本追溯：完整记录发布历史，支持快速排查定位问题

插件地址：https://ext.dcloud.net.cn/plugin?id=21913

现在国内比较先进的ai编程大模型，例如通义灵码和Deepseek，vscode，webstorm这些编辑器都很快接入了，但hbuilderx至今还没有接入，比其他同类编辑器慢太多。而且官方貌似也不重视这个，在ai编程时代，hbuilderx已经快掉队了

可以把uniapp 的一些公共页面抽离出来 提供给其它项目对接？

比如当前项目的 几个公共页面 a,b,c 包括里面的跳转逻辑 和 业务逻辑 然后提供给其它项目 比如 app 小程序使用

const dbSearchFields = ['param'] // 模糊搜索字段，支持模糊搜索的字段列表。联表查询格式: 主表字段名.副表字段名，例如用户表关联角色表 role.role_name  

        getWhere() {  
            let that = this;  
            return dbSearchFields.map(name => new RegExp(that.query[name], 'i') + '.test(' + name + ')').join(' || ')  
        },  

            let newWheres =this.getWhere();    
            newWheres = '('+newWheres+') &&' + query;

前段时间有分享一款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
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

写文档的也是撒比

参考hello-i18n示例项目。存放语言包文件的的文件夹名称要为locale（和示例项目一致，locales都不行），语言包文件名称也要和示例项目保持一致（例如英文为en.json, 简中为zh-Hans.json），否则在pages.json内"%xxx%"占位不生效（在vue文件内$t()可以正常生成）

给父元素添加 justify-content: flex-start; 或者 align-items: flex-start;就可以了, 如何还是不行可以是用下面的方法

使用rich-text来解决, text标签是可以换行的, 但是没有办法撑开高度

// 数组

let arr = [

{

label: "账单编号",

value: [

{

name: "div",

attrs: {

style: "fontSize: 16px;color: #333333;line-height: 26px;",

},

text: _this.payInfo.checkInId,

},

],

},

]

// html

<view

class="similar-info-item"

v-for="(item, index) in _this.baseInfo"

key="index" >
<text class="label">{{ item.label }}：</text>
<view class="con">
<rich-text :nodes="item.value"></rich-text>
</view>
</view>
// css
.similar-info-item {
min-height: 26rpx;
display: flex;
flex-direction: row;
padding-left: 12px;
margin-bottom: 4px;
.label {
width: 90px;
font-size: 16px;
color: #333333;
line-height: 26px;
}
.con {
flex: 1;
line-height: 26rpx;
display: flex;
justify-content: center;
}
}