m***@126.com
m***@126.com
  • 发布:2023-05-11 11:18
  • 更新:2023-05-11 11:18
  • 阅读:320

【报Bug】uni编辑的微信自定义组件,事件返回bug优化建议

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows10

HBuilderX类型: 正式

HBuilderX版本号: 3.8.1

第三方开发者工具版本号: 最新

基础库版本号: 最新

项目创建方式: HBuilderX

操作步骤:

预期结果:

实际结果:

bug描述:

使用usingComponent后,系统会认为使用了微信自定义组件,返回事件的时候,会直接返回[event],代码如下

  var __args__ = isPlainObject(event.detail) ? event.detail.__args__ || [event.detail] : [event.detail];  
  if (isCustom) {  
    // 自定义事件  
    isCustomMPEvent = event.currentTarget && event.currentTarget.dataset && event.currentTarget.dataset.comType === 'wx';  
    if (!args.length) {  
      // 无参数,直接传入 event 或 detail 数组  
      if (isCustomMPEvent) {  
        return [event];  
      }  
      return __args__;  
    }  
  }

vue中引入的时候必须注意是event,例如 引入vant原生组件(switch)的时候,发出的是

  onClick: function () {  
      var _a = this.data, activeValue = _a.activeValue, inactiveValue = _a.inactiveValue;  
      if (!this.data.disabled && !this.data.loading) {  
          var checked = this.data.checked === activeValue;  
          var value = checked ? inactiveValue : activeValue;  
          this.$emit('input', value);  
          this.$emit('change', value);  
      }  
  }

这里的$emit实际上是调用了微信原生的triggerEvent
组件中绑定时间后,需要调用整个事件

    onChange(detail) {  
      this.checked = event.detail  
    }

然后当微信组件是uni打包的时候,一般uni的vue写法是$emit这里直接返回例如:

this.$emit('change', value);

这个$emit其实是

function $emit() {  
  return apply(getEmitter(), '$emit', Array.prototype.slice.call(arguments));  
}
var getEmitter = function () {  
  var Emitter;  
  return function getUniEmitter() {  
    if (!Emitter) {  
      Emitter = new _vue.default();  
    }  
    return Emitter;  
  };  
}();
  Vue.prototype.$emit = function(event) {  
    if (this.$scope && event) {  
      var triggerEvent = this.$scope['_triggerEvent'] || this.$scope['triggerEvent'];  
      if (triggerEvent) {  
        try {  
          triggerEvent.call(this.$scope, event, {  
            __args__: toArray(arguments, 1)  
          });  
        } catch (error) {  

        }  
      }  
    }  
    return oldEmit.apply(this, arguments)  
  };  

这个函数如果是小程序就调用triggerEvent,否则就调用正常的vue Event,然后编译的时候都是小程序组件了,也就不存在vueevent,
所以调用的都是triggerEvent,他讲参数转化了args
如果在vue组件中使用vue编辑的原生组件需要,而且无论怎么调用都是args,vue组件调用的时候

            onChange(detail) {  
                this.checked = detail.__args__  
            }

但是一些vue组建中$emit('input', value)这种原生时间无法处理,因为无法接收,因为实际调用的是__set_model

2023-05-11 11:18 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复