【小分享】让RichText的点击事件支持参数

Creator 2.x
#1

项目开发中会遇到这样需求，一个道具Tips有一段描述文本，文本中会有一或多个链接可点击，点完跳转到相应的界面去。
Creator中可以用RichText来实现，比如：

这是一个牛逼的药水，可以在<on click="onClick">商城购买</on>

但是，RichText的事件不支持额外参数，也就是说点了链接之后一脸懵逼：你点了我，却没有告诉我要干吗？
之前论坛中也有同学修改了引擎，看这里：https://forum.cocos.com/t/richtext/47932?u=111923

这个比较麻烦的是要去重编译引擎，且改的地方多了一点。
我这里有一个更简单的修改方案，在工程中Hook引擎，且只改一个函数：

// 更改引擎，RichText的Tag点击事件，支持额外的参数
cc.RichText.prototype._onTouchEnded = function(event) {
	let components = this.node.getComponents(cc.Component);

	for (let i = 0; i < this._labelSegments.length; ++i) {
		let labelSegment = this._labelSegments[i];
		let clickHandler = labelSegment._clickHandler;
		if (clickHandler && this._containsTouchLocation(labelSegment, event.touch.getLocation())) {
			let clickArgs = clickHandler.split(":");
			let handlerName = clickArgs[0];
			let handlerArg = clickArgs.length > 1 ? clickArgs[1] : "";
			components.forEach(function (component) {
				if (component.enabledInHierarchy && component[handlerName]) {
					component[handlerName](event, handlerArg);
				}
			});
			event.stopPropagation();
		}
	}
}

在你的工程一开始调用这段代码，然后RichText的点击事件就支持额外的参数了，再以上面的例子说，可以这样改：

这是一个牛逼的药水，可以在<on click="onClick:UIStore">商城购买</on>

简单用法：

  • 往界面拉一个RichText
  • 再给RichText加一个脚本组件，在组件中实现一个onClick函数，如下面这样：
cc.Class({
	extends: cc.Component,
	
	onClick(arg) {
		// 这里arg就是额外的参数，即UIStore
		// 在这里就可以显示该界面了，比如：showUI(arg)
	}
})

可能有人会问，怎么支持多个参数呢？我的想法是额外参数是一个字符串，完全可以自己设计格式，比如
UIStore|UIBag，只要参数中没有约定的冒号分隔符就好了。

##不过，还是希望官方能直接加到引擎中去，这些需求是游戏中真正需要的##

7赞