南锋

南奔万里空,脱死锋镝余

cocosCreator多语言拓展-传参和富文本

在cocosCreator中,多语言是我们常用到的一个功能。如果仅仅是单纯的文本,我们很好解决,但是我们在项目中经常会遇到要传递参数或者是使用富文本的情况,这个时候就需要进行特殊的处理了。特别是需要传递参数,因为不同语言语法的原因,参数可能在不同的地方,所以我们不能简单的通过%s的形式进行参数传递,下面介绍我这里用到的方法。

富文本

富文本也是我们常用的一个功能,这里可以用两种方式实现。

  1. 在翻译文本中直接加上相关的参数,比如颜色,字体大小等。(不推荐)
  2. 使用正则表达式识别自定义标签并转化为富文本格式。(推荐,也是我这里要介绍的)

步骤

现在有这么一句话:同意我们的使用条款和隐私政策,我们需要在翻译文本中加上相关的参数,比如颜色。这里我们需要让使用条款隐私政策变成蓝色,并且可以点击,点击不同字样时,可以跳转到对应的页面。
我们可以这样设置我们的翻译文本:

1
2
3
4
"Terms":{
"zh-CN":[str1]同意我们的[/str1][str2]使用条款[/str2]和[str3]隐私政策[/str3],
"en-US":[str1]Agree to our[/str1][str2]Terms[/str2] and [str3]Privacy Policy[/str3]
}

然后再执行下面函数,将返回后的string赋值给我们要使用的富文本即可。例如:

1
this.richText.string = this.parseToRichText(Lang.getText("Terms"));
1
2
3
4
5
6
parseToRichText(text: string): string {
return text
.replace(/\[str1\](.*?)\[\/str1\]/g, '<color=#a1a3bfC0>$1</color>')
.replace(/\[str2\](.*?)\[\/str2\]/g, '<color=#1583ff><u><on click="onClick" param="terms">$1</on></u></color>')
.replace(/\[str3\](.*?)\[\/str3\]/g, '<color=#1583ff><u><on click="onClick" param="privacy">$1</on></u></color>');
}

多语言参数传递

就拿上面的的例子来说,我们希望使用条款隐私政策通过参数传递的。如果,在你所用的多语言中,这两个词在文本中的位置固定。那么可以通过%s的方式来传递就行了。(这里不使用富文本,单纯的Label)
这时的翻译文本可以这么写:

1
2
3
4
"Terms":{
"zh-CN":同意我们的%s和%s,
"en-US":Agree to our%s and %s
}

然后再执行下面函数,将返回后的string赋值给我们的Label即可。例如:

1
this.Label.string = Lang.getText("Terms", "使用条款", "隐私政策");

有些时候,我们需要传递参数,但是参数的位置在翻译文本中不同,这个时候就需要进行特殊的处理,可以通过使用占位符的方式进行传参。
这时的翻译文本可以这么写:

1
2
3
4
"Terms":{
"zh-CN":同意我们的{term}和{Privacy},
"en-US":Agree to our {term} and {Privacy}
}

然后再执行下面函数,将返回后的string赋值给我们的Label即可。例如:

1
2
3
4
this.Label.string = Lang.getText("Terms", {
term: "使用条款",
Privacy: "隐私政策"
});

这里写了一个通用函数,可以兼容上面的两种情况:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public static getText(key: string, ...args: any[]): string {
const langConfig = this.config[key]?.[this.curLanguageStr];
if (!langConfig) return "";

let template = langConfig;

// 判断是命名参数(对象)还是位置参数
if (args.length === 1 && typeof args[0] === "object" && !Array.isArray(args[0])) {
const params = args[0] as Record<string, string>;
// 命名参数替换 {key}
return template.replace(/\{(\w+)\}/g, (_, key) => params[key] ?? `{${key}}`);
} else {
// 默认位置参数替换 %s
let i = 0;
return template.replace(/%s/g, () => args[i++] ?? "");
}
}

仅提供一个示例,实际开发中,需要根据实际情况进行修改。

+