卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › 使用uview-plus遇到的一些问题!

使用uview-plus遇到的一些问题!

坚果大叔
2025-09-19 20:21:59技术阅读 724

一开始使用的版本是3.3.64,因为看官网文档中有些组件是3.4.68才支持的,之前的版本没有这个功能,然后就把版本升级了一下,结果带来了以为问题。因为在官方文档中并没有说明,所以如果有遇到相同问题的可以参考解决一下。

第一个问题css语法问题

因为项目中开了TS严格模式,在编译成app的时候提示如下CSS语法错误,但是只是警告不是ERROR。实际上是可以忽略的。

使用uview-plus遇到的一些问题!-卖坚果的怪叔叔

20:41:29.534     node_modules\uview-plus\components\u-coupon\u-coupon.vue 111:9  root stylesheet 
20:41:29.534 DEPRECATION WARNING: Sass's behavior for declarations that appear after nested 
20:41:29.534 rules will be changing to match the behavior specified by CSS in an upcoming 
20:41:29.534 version. To keep the existing behavior, move the declaration above the nested

上面的width:100%位置会导致CSS检查报错,将它移动到最顶端就可以了。

第二个问题:富文本组件的事件丢失

在上一个版本中用的好好的,更新最新版本后,点击图片事件丢失。出现如下emit错误。查看源码后发现判断更改,注册事件变动。emit暴露方法旨在鸿蒙中生效,H5上没有用了。

解决办法

修改注册判断以及将emit事件暴露出去。

     this.$nextTick(() => {
-      // 修复可能导致死循环的问题
-      for (this.root = this?.$parent; this.root && this.root?.$options.name !== 'mp-html'; this.root = this.root?.$parent);
+      for (this.root = this.$parent; this.root.$options.name !== 'u-parse'; this.root = this.root.$parent);
     })
   // #ifdef H5 || APP-PLUS
   node.attrs.src = node.attrs.src || node.attrs['data-src']
   // #endif
+  console.log('imgTap', node.attrs)
+  this.root.$emit('imgTap', node.attrs)
   // #ifndef APP-HARMONY
   this.root.$emit('imgtap', node.attrs)
   // #endif

第三个问题,上传组件限制只能上传9张

在使用上传组件的时候发现一个问题,只能上传9张,不管是app还是H5上面。之前没有发现是因为在微信中打开H5系统的选择图片最多选择9张。后来用H5就算你选了20张也只给你上传9张。一开始还以为是手机系统原因。然后就去看了源码,如下:

uni.chooseImage({
    count: multiple ? Math.min(maxCount, 9) : 1,
    sourceType: capture,
    sizeType,
    success: (res) => resolve(formatImage(res)),
    fail: reject
})

当你设置了可以多选的时候,默认取始终取的是最小值9,大无语呀!所以如果你需要上传实际选择的图片可以直接把macCount做为参数就行了。

以上问题在修改后通过patch补丁的方式来进行修改,如果有遇到相同问题的小伙伴可以使用同样是解决方式!

pnpm patch的工作流程

1. 生成临时目录
pnpm patch uview-plus

#输出类似:这个目录是 uview-plus的完整副本,可以直接修改。
You can now edit the following folder: /tmp/abc123
2. 修改代码
cd /tmp/abc123
code components/u-coupon/u-coupon.vue# 修改文件
3. 生成补丁
pnpm patch-commit /tmp/abc123

# 在 patches/目录下生成补丁文件(如 uview-plus@3.5.41.patch)
# 自动在 package.json中添加 pnpm.patchedDependencies配置
4. 重新安装验证
rm -rf node_modules
pnpm install
赞赏 赞(0)
Nuxt3中的水合是什么?以及使用中的一些总结!
上一篇
在小程序中查看
再想想
暂无评论
搜你想看的
聚合文章
10000字!32个手写JS,让你Level∞ +!
Ant-design-vue Table 增加单选操作!
如何获取微信文章封面和文章标题!
Vue 添加滚动监听
闲言碎语
Memos
Nuxt3中的水合是什么?以及使用中的一些总结!
2025-08-30 19:42:35
1,237 0 0
Element Plus Upload 添加支持拖拽排序~
2025-07-30 20:55:55
901 1 0
Nuxt3中piana持久化处理!
2025-06-22 18:45:45
971 0 2
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
1,551 0 1
  • 0
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 卖坚果的怪叔叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
328
文章
138
评论
399
喜欢