1.安装插件,在项目的根目录下打开命令行,执行
npm i --save taro-i18n
2.创建 locales.ts文件 ,例子中是放在utils文件夹下的,实际上你可以将该文件放在你项目的任意位置
//locales.ts文件内容
export default function get(value: any={}): any{
return {
//en 和 zh是语言类型,可以新增语言或重命名
'en': {
'test': 'this is test text',
'testParam': `Resend in ${value.time} s`,
'testMultiParam': value.name+'go to'+value.school
},
'zh': {
'test': '这是测试文本',
'testParam': `${value.time}秒后重发`,
'testMultiParam': value.name+'去上'+value.school
}
}
}
3. 在app文件(app.tsx或app.js,根据你的项目使用的是ts还是js决定,以下是ts的例子)中引入组件,并初始化组件
//文件最上方引入组件
import i18n from 'taro-i18n'
//导入步骤2中你建的 locales.ts文件,我是放在utils文件夹下,具体以你实际位置为准
import locales from './utils/locales'
//在生命周期方法中初始化组件
componentWillMount(){
//1.使用系统语言的初始化方法,第一个参数是:语言类型 第二个参数是:词语仓库
// Taro.getSystemInfo().then((result)=>{
// i18n.t = new i18n(result.language,locales)
// })
//2.使用给定的语言初始化方法,第一个参数是:语言类型 第二个参数是:词语仓库
i18n.t = new i18n('zh',locales)
}
4. 简单使用
在页面或组件中引用 import i18n from 'taro-i18n' 在需要的地方 i18n.t._('test'),显示效果 '这是测试文本'
5. 带参数使用
同样需要在页面或组件中引用 import i18n from 'taro-i18n'
//locales.ts 中
'testParam': `${value.time}秒后重发`,
也可以用其他写法,作用一样
//locales.ts 中
'testParam': value.time+'秒后重发',
使用i18n.t._('testParam',{'time':'60'}) 显示效果 '60秒后重发'
可以有多个参数,但注意参数名一致,列如这里的 time 对应 value.time,多参数例子如下:
//locales.ts 中
'testMultiParam': value.name+'去上'+value.school,
使用i18n.t._('testMultiParam',{'name':'小明','school':'明珠小学'}) 显示效果 '小明去上明珠小学'
6.手动修改语言类型
i18n.t.setLocale('en')