一开始使用的版本是3.3.64,因为看官网文档中有些组件是3.4.68才支持的,之前的版本没有这个功能,然后就把版本升级了一下,结果带来了以为问题。因为在官方文档中并没有说明,所以如果有遇到相同问题的可以参考解决一下。
第一个问题css语法问题
因为项目中开了TS严格模式,在编译成app的时候提示如下CSS语法错误,但是只是警告不是ERROR。实际上是可以忽略的。
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