TMUI4x(鸿蒙Next)

Appearance

广告位招租意向联系我
TMUI4x2025-09-03
2197
8.8m

国际化配置 ​

前置说明 ​

国际化语言插件，我是采用外挂同步内置形式处理，就是指插件我是单独写的，你可以单独使用我的那个插件，不必捆绑，比如你拿去给别的应用使用，非tmui4x项目也能用。 但请注意： 本项目中tmui4x项目是捆绑x-vuei18n-s语言插件的，也就是说你从1.1.15开始必须要安装语言插件，来让内部初始组件的多语言。 地区语言代码标准见打开链接 本页面尾部附带了常见的语言代码。

前置条件 ​

你已经使用并安装tmui4x组件库，那么会自带集成捆绑并初始化i18n实例，但需要你复制本插件到您的项目中，目录 您的项目 > uni_modules > x-vuei18n-s

接着安装语言包

ts

import App from './App'
import {xui} from "@/uni_modules/tmx-ui/index.uts"

//多语言配置类型
import {Tmui4xOptions} from "@/uni_modules/tmx-ui/interface.uts"
//下方是组件内部的语言包
import en from "@/uni_modules/tmx-ui/localLanuage/en.json"
import zhHans from "@/uni_modules/tmx-ui/localLanuage/zh-Hans.json"
import zhHant from "@/uni_modules/tmx-ui/localLanuage/zh-Hant.json"
import ko from "@/uni_modules/tmx-ui/localLanuage/ko.json"
import ja from "@/uni_modules/tmx-ui/localLanuage/ja.json"
//如果你有自己的语言包，你也可以像上面那样导入语言，然后与组件的语言合并。或者你自己新增个语言进去。
// 下方是组件的语言包，以及你自己定义的语言包与组件合并即可。共用一个实例。
const messages : UTSJSONObject = {
	"en":{
		...en,
		"hellow":"Hi~"
	},
	"zh-Hans":{
		...zhHans,
		"hellow":"哈喽"
	},
	"zh-Hant":zhHant,
	"ko":ko,
	"ja":ja
}
import { createSSRApp } from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	// 配置语言包
	app.use(xui,{i18nOptions:{locale:"zh-Hans",messages},config:null} as Tmui4xOptions)
	return {
		app
	}
}

在任意Uts中使用 ​

uts

import {xStore} from "@/uni_modules/tmx-ui/index.uts"
const i18n = xStore.xConfig.i18n
console.log(i18n.t('xx.x'))

在Uvue内使用 ​

1.组合式模板内 ​

ts

import {xStore} from "@/uni_modules/tmx-ui/index.uts"
const i18n = xStore.xConfig.i18n
console.log(i18n.t('xx.x'))

uts内导入后可以在模板内使用

vue

<x-text>{{i18n.t('xx.x')}}</x-text>

2.选项式模板内 ​

它已经集成了,不需要向组合式那样再导入.

ts

export default {
	methods:{
		test():string{
			return this!.i18n.t('xx.x')
		}
	}
}

它已经集成了,不需要向组合式那样再导入.

vue

<x-text>{{i18n!.t('xx.x')}}</x-text>

i18n实例方法 ​

如果想要看每一个方法的示例，见插件目录内的readme.md文档，有详细的测试案例。

ts

/**
 * uniapp-x下的tmui4x附带的多语言插件，现面向所有用户开放本语言插件。
 * @author tmui4x
 * @copyright https://tmui.design
 * @date 2025/7/8
 */
export interface  Tmui4xI18nTml {
	/** 实例配置,可以动态修改本配置 **/
	ops : I18nOptionsReally
	/** 设置语言 */
	setLocale(local : string) : void;
	/**
	 * 获取语言
	 * @returns {string} 当前设置的语言
	 */
	getLocale()  : string;
	/**
	 * 获取回退语言
	 * @returns {string} 当前回退的语言
	 */
	getFallbackLocale()  :  string;
	/** 设置回退语言 */
	setFallbackLocale(local : string) :void;
	/** 全量填充配置 **/
	setOptions(args : I18nOptions|null):void;
	/**
	 * 翻译方法 - 参考 Vue I18n 实现（UTS类型安全优化版本）
	 * @param key 翻译键
	 * @param args 可选参数：数字(用于复数)、对象(用于插值)、字符串(locale)等同原vueI18n使用方式
	 * @param opts 可选的第二个参数当args为复数数字，key中函数 | 时，此opts起效且必须为utsjsonobject格式等同原vueI18n使用方式
	 * @returns 翻译后的字符串
	 */
	t(key : string, ...argsopts : Array<any>) :  string;
	/**
	 * 数字格式化方法 - 参考 Vue I18n 实现
	 * @param val 要格式化的数字
	 * @param name 格式化名称模板，如果不存在以opts为准，如果opts也没有则取默认值。
	 * @param opts 格式化选项
	 * @returns 格式化后的字符串
	 */
	n(val : number, formatName ?: StringOrNull, opts ?: NumberFormatOrNull) : string;
	/**
	 * 日期时间格式化方法 - 参考 Vue I18n 实现
	 * @param val 要格式化的日期时间值（Date对象、时间戳数字或日期字符串）
	 * @param formatName 格式化名称模板，如果不存在以opts为准，如果opts也没有则取默认值
	 * @param opts 格式化选项
	 * @returns 格式化后的字符串
	 */
	d(val : DateOrNumberOrString, formatName ?: StringOrNull, opts ?: DateTimeFormatOrNull) : string;
	/**
	 * 动态添加语言的新字段
	 * @param {string} local 语言
	 * @param {UTSJSONObject} newMessage 键值及字段。
	 */
	mergeLocaleMessage (local : string, newMessage : UTSJSONObject) : void;
	/**
	 * 检测翻译键是否存在 - 参考 Vue I18n 的 te 方法实现
	 * @param {string} key 翻译键，支持嵌套路径如 'user.name'
	 * @param {string} locale 可选的语言代码，不提供则使用当前语言
	 * @returns {boolean} 存在返回true，不存在返回false
	 */
	te(key : string, locale ?: string | null) : boolean;
	/**
	 * 相对时间
	 * @param {string，number，Date} timeValue 时间差（毫秒）
	 * @param {string} unit 首选单位,它会自动进阶更高的维度，比如提供秒，超过60秒以分为单位进阶。
	 * @param {string} locale 可选语言，不提供以默认创建的设置为准。
	 * @returns {string} 格式化后的时间字符串
	 */
	rt(timeValues ?: number | Date | string | null, units ?: string | null, locale ?: string | null) : string;
	/**
	 * 获取可用语言列表
	 * @returns {string[]}
	 */
	availableLocales() : string[]
}

更多的语言扩展 ​

如果当前默认的语言不足以满足你，就像前置安装那样，自己把语言包补充进去就行。

附件：语言代码列表 ​

代码语言名称地区/脚本备注说明
zh中文-不区分简繁和地区
zh-CN中文中国（大陆）简体中文
zh-SG中文新加坡简体中文
zh-Hans中文简体脚本简体，不限地区
zh-Hant中文繁体脚本繁体，不限地区
zh-TW中文台湾繁体中文
zh-HK中文香港繁体中文
zh-MO中文澳门繁体中文
ko韩语-不区分地区
ko-KR韩语韩国韩国韩语
ko-KP韩语朝鲜朝鲜韩语（极少用）
ja日语-不区分地区
ja-JP日语日本日本日语
en英语-通用英语
en-US英语美国美国英语
en-GB英语英国英国英语
en-AU英语澳大利亚澳大利亚英语
en-CA英语加拿大加拿大英语
en-IN英语印度印度英语
fr法语-通用法语
fr-FR法语法国法国法语
fr-CA法语加拿大加拿大法语
de德语-通用德语
de-DE德语德国德国德语
de-AT德语奥地利奥地利德语
de-CH德语瑞士瑞士德语
es西班牙语-通用西班牙语
es-ES西班牙语西班牙西班牙西班牙语
es-MX西班牙语墨西哥墨西哥西班牙语
es-AR西班牙语阿根廷阿根廷西班牙语
pt葡萄牙语-通用葡萄牙语
pt-PT葡萄牙语葡萄牙葡萄牙葡萄牙语
pt-BR葡萄牙语巴西巴西葡萄牙语
ru俄语-通用俄语
ru-RU俄语俄罗斯俄罗斯俄语
it意大利语-通用意大利语
it-IT意大利语意大利意大利意大利语
nl荷兰语-通用荷兰语
nl-NL荷兰语荷兰荷兰荷兰语
nl-BE荷兰语比利时比利时荷兰语
sv瑞典语-通用瑞典语
sv-SE瑞典语瑞典瑞典瑞典语
fi芬兰语-通用芬兰语
fi-FI芬兰语芬兰芬兰芬兰语
da丹麦语-通用丹麦语
da-DK丹麦语丹麦丹麦丹麦语
pl波兰语-通用波兰语
pl-PL波兰语波兰波兰波兰语
tr土耳其语-通用土耳其语
tr-TR土耳其语土耳其土耳其土耳其语
el希腊语-通用希腊语
el-GR希腊语希腊希腊希腊语
he希伯来语-通用希伯来语
he-IL希伯来语以色列以色列希伯来语
ar阿拉伯语-通用阿拉伯语
ar-SA阿拉伯语沙特阿拉伯沙特阿拉伯阿拉伯语
ar-EG阿拉伯语埃及埃及阿拉伯语
th泰语-通用泰语
th-TH泰语泰国泰国泰语
vi越南语-通用越南语
vi-VN越南语越南越南越南语
id印度尼西亚语-通用印尼语
id-ID印度尼西亚语印度尼西亚印尼印尼语
ms马来语-通用马来语
ms-MY马来语马来西亚马来西亚马来语
hi印地语-通用印地语
hi-IN印地语印度印度印地语
ur乌尔都语-通用乌尔都语
ur-PK乌尔都语巴基斯坦巴基斯坦乌尔都语
ta泰米尔语-通用泰米尔语
ta-IN泰米尔语印度印度泰米尔语
bn孟加拉语-通用孟加拉语
bn-BD孟加拉语孟加拉国孟加拉国孟加拉语
bn-IN孟加拉语印度印度孟加拉语
最近更新