运行到鸿蒙模拟器报HBuilder X 运行设备不兼容鸿蒙模拟器目前只能在arm64平台运行

我们非常高兴地宣布，wot-design-uni 组件库的最新版本 1.5.0 于 2024 年 12 月 9 日正式发布！这一版本不仅引入了许多令人期待的新功能，还进行了文档更新和多个 Bug 修复，进一步提升了用户体验和组件的灵活性。

GitHub Star 数突破 10000

令人振奋的是，wot-design-uni 在 GitHub 上的 Star 数量已经超过了 10000！这一里程碑的达成，离不开每一位用户的支持与反馈。我们深感荣幸，并将继续努力，为大家提供更优质的组件。

✨ 新功能

1. Divider 分割线功能优化：支持虚线、垂直等多种样式，增强了设计灵活性。
2. Calendar 组件优化：改进了选中样式和滚动位置处理，并支持屏蔽内置 cell，提升了用户体验。
3. Curtain 幕帘新增功能：新增 close 插槽和自定义关闭插槽样式类，提供更多自定义选项。
4. DropMenuItem：增加自定义 Popup 样式参数，增强了菜单的灵活性。
5. Input 和 Textarea 支持 inputmode：在 APP-VUE 和 H5 端提供更好的输入体验。
6. MessageBox 新增 ButtonProps 属性：允许用户自定义确认和取消按钮的样式，增强了交互性。
7. Radio 组件：添加了 icon-placement 属性，用于控制图标方向。
8. Segmented 组件：提供了 updateActiveStyle 方法，允许用户设置激活样式。
9. Table 组件：支持设置不固定表头，提升了表格的使用灵活性。
10. Upload 组件：新增文件重传功能，提升了文件上传的便利性。

✏️ 文档更新

我们对文档进行了全面的优化，增加了内容的可用宽度，并支持收起演示 demo。此外，新增了关于 MessageBox 自定义按钮样式和 Sass 的介绍，帮助用户更好地理解和使用组件。

Bug 修复

在 1.5.0 版本中，我们针对多个关键问题进行了修复，包括：

• Button 按钮：解决了设置为 block 时无效的问题。
• Cell 组件：修复了 label 过长时影响页面结构的情况。
• Collapse 组件：确保在数据变化时折叠面板状态能够正确更新。
• GridItem：修复了徽标属性类型标注错误的问题。
• Progress 组件：解决了无法设置进度为 0 的问题。
• Swiper：修复了在支付宝小程序平台点击事件无效的问题。
• Tab 组件：修复了未渲染项高度影响整体高度的问题。
• 其他多个组件的 Bug 修复，确保了更稳定的使用体验。

结语

感谢大家对 wot-design-uni 的支持与关注！我们将继续倾听用户的声音，致力于不断改进和完善我们的组件库。期待在未来的版本中为大家带来更多惊喜和功能！如需了解更多详情，请访问我们的 GitHub 页面或者插件市场地址。

不同云服务空间(阿里云，支付宝云等)存在差异，详细流程加微信 pce105 ,一对一讲解，远程协助部署调试

厂家提供的安卓原生的sdk，用来连接硬件的蓝牙，拿硬件的数据，需要做成uniapp的插件在uinapp使用，价格看具体难度，能做的麻烦留一下联系方式

自研uniapp+vue3+pinia2多端酒店订房管理系统Uni-WeTrip(h5+小程序+App端)

uniapp-vue3-wetrip原创基于vite5+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。

uniapp+vue3+pinia2+uvui跨多端酒店预订app系统

技术栈

• 跨端框架：Uniapp + Vue3
• 构建工具：Vite5
• 状态管理：Pinia2
• UI组件库：uni-ui + uv-ui
• 缓存技术：pinia-plugin-unistorage

功能性

• 开发工具：HbuilderX 4.36
• 跨平台兼容性：支持H5、小程序和App端，确保在不同设备上的无缝体验。
• 实时消息聊天：内置的消息聊天功能模块，增强用户间的沟通效率。
• 自定义组件：提供uv3-navbar标题栏和uv3-tabbar菜单栏等自定义组件，方便开发者根据需求进行调整。
• 缓存机制：利用pinia-plugin-unistorage实现数据缓存，提高应用性能。

项目结构

uni-vue3trip布局模板

<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>

uni-app+vue3自定义导航条/菜单栏

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预订功能

<!-- 日历 -->  
<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+vue3聊天模块

之前有开发一款uniapp+vue3聊天app实例，就不作过多的介绍，如果感兴趣可以去看看下面这篇文章。
https://www.cnblogs.com/xiaoyan2017/p/18165578

过往跨平台实战项目

HarmonyOS-Chat聊天室|纯血鸿蒙Next5 api12聊天app|ArkUI仿微信

tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序

Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板

electron31+vite5+element-plus桌面端聊天EXE

flutter3+dart3+getx跨端仿抖音App短视频直播实战

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

worker插件地址

部分还不知到怎么在子线程中调用uni相关的api的，这里写一个简单的示例。

子线程中

postMessage({  
type:'showToast',  
param:'弹窗'  
});

主线程接收参数，调用uni相关api

this.worker.message = (e) => {  
const {type,param} = e;  
 uni[type]({  
content:param  
})  
}  

[Info] 正在制作apk安装包...

[Error] 进程已崩溃
[Info] begin replace files to apk...
[Info] begin copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/icon-android-hdpi.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-hdpi/icon.png]...
[Info] copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/icon-android-hdpi.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-hdpi/icon.png] success.
[Info] begin copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/icon-android-xhdpi.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-xhdpi/icon.png]...
[Info] copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/icon-android-xhdpi.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-xhdpi/icon.png] success.
[Info] begin copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/icon-android-xxhdpi.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-xxhdpi/icon.png]...
[Info] copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/icon-android-xxhdpi.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-xxhdpi/icon.png] success.
[Info] begin copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/icon-android-xxxhdpi.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-xxxhdpi/icon.png]...
[Info] copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/icon-android-xxxhdpi.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-xxxhdpi/icon.png] success.
[Info] begin copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/splash-android-hdpi.9.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-hdpi/splash.9.png]...
[Info] copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/splash-android-hdpi.9.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-hdpi/splash.9.png] success.
[Info] begin copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/splash-android-xhdpi.9.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-xhdpi/splash.9.png]...
[Info] copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/splash-android-xhdpi.9.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-xhdpi/splash.9.png] success.
[Info] begin copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/splash-android-xxhdpi.9.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-xxhdpi/splash.9.png]...
[Info] copy file[D:/前端/APP/dist/app/unpackage/cache/wgt/H5EAB6485/.manifest/splash-android-xxhdpi.9.png] to [C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/H5EAB6485_cm/res/drawable-xxhdpi/splash.9.png] success.
[Info] begin update files to apk...
[Error] try compile package:0
[Error] 进程已崩溃
[Info] begin zipalign apk:C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/release/apk/H5EAB6485_nosign.apk
[Error] Unable to open 'C:/Users/Administrator/AppData/Local/HBuilder X/AndroidPackWork/cache/H5EAB6485/packge_cache/NONE/release/apk/H5EAB6485_nosign.apk' as zip archive
[Error] Apk zipalign failed
[Error] 制作结果：Failed. Reason:

uniapp 程序内嵌 H5链接，然后进入H5的聊天系统进行聊天跳转分享订单，在H5链接页面通过window.parent.postmessage发送消息后，uniapp 的内嵌页面 web浏览器能接受到信息，接收到信息后能在程序里面能跳转到订单详情页面去。但 打包出的APP 及模拟器手机上 即没有报错，也没有提示，不能跳转去订单详情。 请问是 uniapp 不支持吗 ？还是被阻止了？

H5页面发送信息代码：
const oRderDetail=( val )={
const message ={
topic:'share_id',
data:{share_id: val.messageContent? orderId }
if(window.FlutterChannel){
window.FlutterChannel.postMessage(encodeURIComponent(JSON.stringify(message)))
}else{
window.parent.postMessage(message)
}
}
}

uniapp 接收消息的 代码如下：
iframeLoadedMsg(){
let that=this
window.addEventListener('message', function(event) {
console.log(event.data)
if (event.data.topic==="shareOrder"){
that.share_id = event.data.data.share_id
//that.$router.push({path:/expert/expertHome/openDetail?shareId=${this.share_id}})
that.$router.push({name:'ExpertOpenDetail',query:{shareId: that.share_id}})
}
}, false);
},
在web 浏览器，两个跳转方式如下，他们都能够跳转，但是APP 和安卓模拟器（链接的手机）点击分享跳转，就是一点反应都没有，搞弹框提示，也没有弹框。但是在HBuilder X 的内置 web浏览器 能够跳转：
that.$router.push({path:/expert/expertHome/openDetail?shareId=${this.share_id}})
that.$router.push({name:'ExpertOpenDetail',query:{shareId: that.share_id}})

在小米 14 上跳转会员中心能正常跳转 小米10和小米pad5上无法正常显示页面 直接白屏

场景： UTS 和 web-view 通信时传输json 中包含中文或其他特殊字符

如果单纯使用atob 和 btob 无法处理包含的中文，可以使用 TextEncoder和 TextDecoder编码解码

UTS 发送数据时：
let v1 = uni.createWebviewContext("web-view")
let dataStr:string = JSON.stringify(jdata as UTSJSONObject)
// 转uint8array 直接传！！！！！！！！！
let encoder = new TextEncoder()
let u8arry = encoder.encode(dataStr)
console.log('getOcrData -----> 向网页发送数据' ,u8arry)
v1?.evalJS(testrece("${u8arry}"))

UTS 接收数据时：
// 解码
let str = recMessage[0]["data"] as string
let strAry: string[] = str.split(',')
let setAry: number[] = []
//循环strary 写入setARY
strAry.forEach(element => {
setAry.add(parseInt(element))
})

let utf8decoder = new TextDecoder();
let rststr = utf8decoder.decode(Uint8Array.from(setAry))
console.log('接收的转换-----', rststr.toString())

web-view中接收uint8array并解析json:
// 尝试解码
// 1. 将字符串按 ',' 分割，并转换为数字数组
let strArray = str.split(',').filter(Boolean); // 去掉空字符串
let byteArray = new Uint8Array(strArray.map(Number)); // 转换为 Uint8Array
let decoder = new TextDecoder('utf-8')
try {
let jsonStr = decoder.decode(byteArray)
let jsonObj = JSON.parse(jsonStr)
// uts内打印日志
uni.postMessage({
data: {
event: 'consolelog',
data: 转码失败.${jsonObj.id}
}
})
} catch (error) {
// uts内打印日志
uni.postMessage({
data: {
event: 'consolelog',
data: 转码失败.${error.message}
}
})
}

web-view中编码Json发送:
let jsonObj = {
"id": "1234567890",
"name": "张三",
"age": 25,
"gender": "男",
}
let encoder = new TextEncoder()
let encodedData = encoder.encode(JSON.stringify(jsonObj))
let byteArrayString = Array.from(encodedData).join(',')
uni.postMessage({
data: {
event: 'test',
data: byteArrayString
}
})

Json 数据完整完美显示!

产品说明：系统产品经理及开发团队为家政行业从业多年，更了解的家政业务场景

产品技术栈：Uniapp + Unicloud (阿里云)前后端分离
平台构架：客户端(小程序) + 家政服务人员端(小程序) + 管理后台端(小程序)
二次开发：购买源码后团队提供二次开发的文档及技术支持，也可以提供定制开发

我发现，uniapp你说小众吧？也不小众，你说大众吧？也不大众，感觉就是量子纠缠。做一个商业项目，你说定制的东西确实要原生的好大哥去写，我可以理解，你们说为什么本身第三方都支持到了小程序，就是偏偏不支持uniapp呢？就好比腾讯云这个COS，app直传cos，这是相当常规的商业APP需求了吧？腾讯云好大哥，自家小程序sdk都写了，就是不带uniapp玩，没办法，只能自己写一个。需要的自取吧！

库地址

• npm：https://www.npmjs.com/package/cos-uni-sdk-v5
• 源码地址：https://gitee.com/timoprince/cos-uni-sdk-v5

支持情况

源码我是js写的，因为我发现了，我自己ts玩的再6，团队不用ts，或者万物皆any，一点意义都没有了。看看大家反馈吧，如果大家用ts的需求比较大，我可以考虑加一个ts的版本，当然我确实觉得没必要，也不是多么难以理解的东西！