对于uts开发组件的问题，uni-app官方你们解释下吧，是在敷衍还是我的问题

对于uts开发组件的问题，uni-app官方你们解释下吧，是在敷衍还是我的问题

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

测试过的手机

模拟器

操作步骤

已描述

预期结果

已描述

实际结果

已描述

bug描述

你们好逮完善后，能用吧。本来想参加大赛开发的。结果一下场问题如下：

  • 原文档链接官方链接，里面复制的示例到hbx 3.94中一堆错误和警告

    明显错误如下：

    • unmounted() {}这个后面少了个“，”逗号
    • .$androidContext报错，要写this.$androidContext
    • 这里错误：LinearLayout.LayoutParams(500, 500)，要写成：new LinearLayout.LayoutParams(500, 500);
    • /* 定义默认样式值, 组件使用者没有配置时使用 */ .defaultStyles { width: 750rpx; height: 240rpx; background-color: blue; } 这段没有用，需要外部引用自己写宽高显示（文档尾部有注释，但这个放在，我还以为有用？结果没鸟用。）

  • 组件开发后，外部引用需要自己写style宽度显示，这。。。。怎么开发组件库。

  • 里面的数值比如创建View,Button使用LayoutParams(500, 500);设置宽和高，，，，数值你以为是500px?500rpx?不是鬼知道是什么，反正要自己获取系统的dpr就相乘，才会等于css中的500rpx，这种区别文档没说明

  • 有的参数报需要UTSArray<Int>格式，找了的所有文档没找到这个数据类型。

  • 跳过上面所有问题，免强做出一个界面，但。。。。是又有以下问题：

    a. 创建组件名为hellow-x,内部比如在script标签中写了let button = new Button（）然后通过点击事件改变颜色，组件写了props color,然后watch中通过button.setBackground来改变值

    b. uvue引用hellow-x,页面引用了三个，给其中一个写：color=“color”, 页面data中color:“red”,每个写了宽和高，显示出来了，点击其它元素触发color=“blue”，会发现三个颜色全变成了blue？？？？(按理是配置了color的那个组件的才会改变为blue)

    打印知道，内部的button变量，三组件里面全部是相等的，而且等于页面引用中最后的一个值？？？

    c. watch是进入就会执行，和vue中的框架是有区别的，其实是相当于vue3中的watchEfftce监视并立即执行，与我们说的watch不同。

如果上述问题是我的问题，本帖子当我是学习。


更多关于对于uts开发组件的问题，uni-app官方你们解释下吧，是在敷衍还是我的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

官方还是修复下uniapp和nvue的问题吧。uts我目测没有2年+还是不要上线的好。还是以商业基础为主，新开发的也不要力推，必竟语法啥的都没完善。

更多关于对于uts开发组件的问题，uni-app官方你们解释下吧，是在敷衍还是我的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


nvue早就不维护了，修复是不可能了

按原来开发UI组件的方式即可

不是的，你还是看下官方文档吧。有专门的章节介绍uts组件开发栏目 ，区别还是很大的。

回复 陌上华年: 你先自己试试下，复现我的bug再说吧。只能说半成品。

回复 陌上华年: 另外这个半成品。开发的类型和运行类型提示是不对称的。我都不知道官方是如何理解开发效率的。比如编译器提示number[],编译后提示错误。实际要int[]，，，，这要样的效果编译下一个坑。。。

回复 陌上华年: 我主要是说Uts组件开发。不是你说的Uniapp组件开发。如果是uniapp。我就没必要用这个uts了。。。原生组件性能更好官方不是说了吗。

感谢反馈，几乎都是我们的问题。 utsarray是array的旧称，我们排查下哪里还在提示utsarray。 uni-app我们还会继续维护。nvue不维护了。 欢迎加入uts插件作者的qq群 527828934 交流。

感谢反馈。
第一个问题
文档已更新，修改了错误用法。
除了逗号，其他的应该只是警告，如果你那边编译也有影响，再与我联系
第二个问题
组件默认样式，目前尚不支持，相关说明已移除，后续会更新支持
第三个问题
UTS插件中直接操作android 原生api 对应的单位，都是物理像素 px,
文档补充了：
UTS插件像素单位说明
第四个问题
UTSArray 是Array 在原生平台的实现，关于UTSArray的说明
正常情况下，所有要求 UTSArray 参数场景，都应该以 Array 传递即可实现， 比如，请求权限

如果你能定位到报错的具体api，我们可以更快的修复此异常
剩下的问题，给个示例，我们整体排查一下。方便的话加群交流效率高些。

作为uni-app技术专家，我来针对您提出的UTS组件开发问题进行分析和解答：

  1. 文档问题：
  • 确实存在示例代码不够严谨的情况，我们会反馈给文档团队进行修正
  • 默认样式问题：UTS组件确实需要外部容器明确指定尺寸，这是与Vue组件不同的设计
  1. 单位问题：
  • UTS中直接使用数字参数时单位是px而非rpx
  • 建议通过uni.upx2px()方法进行rpx到px的转换
  1. 数据类型问题：
  • UTSArray<Int>表示UTS的整型数组，文档确实需要补充说明
  1. 组件共享状态问题：
  • 这是典型的状态共享问题，每个组件实例应该维护自己的状态
  • 解决方案： a) 在组件内部使用reactive状态管理 b) 避免直接修改props，应该使用emit事件 c) 确保每个组件实例有独立的变量引用
  1. watch行为：
  • UTS的watch确实更接近watchEffect，这是设计差异
  • 可以通过添加immediate:false选项来控制首次不执行

建议改进方案：

  1. 组件内部状态管理：
const button = ref<Button|null>(null)
onMounted(() => {
  button.value = new Button()
})
  1. 样式处理建议：
// 转换rpx到px
const width = uni.upx2px(750)
const params = new LinearLayout.LayoutParams(width, width)
  1. 事件处理改进：
watch(() => props.color, (newVal) => {
  button.value?.setBackgroundColor(newVal)
}, {immediate: false})
回到顶部