TMUI 3.1.1
键入关键记事 K

Appearance

On this page
开发指南 tmui.design ​

图标说明：
✔️ 已测试并兼容
✅ 未测试，理论兼容
❌ 不兼容
⛔ 未知

国际化 v3.0.4+ ​

通过本地语言和自定义语言，实施全球化。通过我的简单封装消除了所有平台的差异配置，只需要调用language(key)

TIP

为了全平台兼容，我对i18n进行了简单的封装，不会破坏整体。该怎么配置多语言版本还是按照官方来
我为了降低国际化配置的难度，同时也抹平了nvue和非原生nvue平台的之间的差异，统一使用
导入 import {language} from "@/tmui/tool/lib/language"
任意地方language(key)返回当前语言文字。

⚙️ 语言版本兼容性 ​

ZHENVUE(小程序,h5等)NVUE(原生)
✔️✔️✔️✔️

⚙️ 获取/设置语言 ​

通过官方函数也获取语言名称国际化教程

通过uni官方方法获取

ts
uni.getLocale() //返回当前语言

通过本组件库获取

ts
import {language} from "@/tmui/tool/lib/language"
language("language")

设置当前语言

ts
uni.setLocale('en') //英文
uni.setLocale('zh-Hans') //中文简体

⚙️ 配置语言库 ​

找到tmui目录下的locale目录。
将看到两个文件：

  • en.json
  • zh-Hans.json

你可以对里面的内容进行更改，或者添加你的app语言字段。也可以新增其它语言版本。只 要在当前目录创建语言即可比如法语
创建Fr.json为法语版本。然后自行在里面添加你的语言字段即可。

⚙️ 页面或者JS中显示 ​

language(key)其中key为你配置的字段名

  1. 上下文中使用
vue
<template>
	<tm-app>
		<!-- 这里将显示你的当前语言名称 -->
		<tm-text  :label="language('language')"></tm-text>
	</tm-app>
</template>
<script lang="ts" setup>
	import {language} from "@/tmui/tool/lib/language"
	//language方法可以在js执行或者vue页面中执行返回当前语言的字段文字。
	language("language") //返回当前语言名称
	language("message.load.text") //返回tm-meassage组件加载的文字
</script>
  1. 任意js中使用,不可在页面模板中调用
uni.$tm.language(key)
  1. 使用uniapp官方方法获取语言文字，只能在非nvue页面中使用
vue
<!-- 这里将显示你的当前语言名称 -->
<tm-text  :label="$t('language')"></tm-text>
<!-- 或 -->
<tm-text  :label="$tm('language')"></tm-text>
<!-- 在js中经测试需要在onmounted中调用或者nextTick下 -->
$tm('language')
<!-- 或 -->
$t('language')

⚙️ 本库示例模板 ​

中文-简单
Invalid code snippet option
英文-美国
Invalid code snippet option