在小程序中使用国际化需求时选用过的方法总结
发布于 5 年前 作者 caotao 1650 次浏览 来自 分享
1、思路一:将国际化语言数据存放在JS文件中,将数据写入路由页面中的 data 中,通过js逻辑控制内容显示
  
var js =  {
       "zh-CN" :{
       		test:"测试"
        },
        "en" : {
       		test:"test"
        }
}

var lang = wx.getSystemInfoSync().language

var i18n = js[lang];

data: {
   i18n: i18n
}

wxml调用方式: {{  i18n["test"] }} 

实践中,问题:发现将国际化数据全部写入页面data中,有些页面有很多变量实际是不需要用到的,该方式有种资源浪费的感觉。
难以满足形如枚举:你好{name},欢迎,语句

2、思路二:结合wxs和js文件,创建 wxs 文件和 js 文件。

["zh.js","zh.wxs"],["en.js","en.wxs"]文件,其中zh.js 与 zh.wxs 文件中的内容相同,

var zhJS = {
	test:"测试"
}
var zhWXS = {
	test:"测试"
}

var enJS = {
	test:"test"
}
var enWXS = {
  test:"test"
}
引入zhWXS,enWXS文件, wxml调用方式: {{  i18n.t("test") }}  需写一个过滤查找函数(t)
引入zhJS,enJS文件, js调用方式:i18n.t("test") 需写一个过滤查找函数(t)

实践中,举例:发现该方式每次要维护zhJS 和 zhWXS 相同的文件,加大了文件占用体积。难以满足形如枚举:你好{name},欢迎,语句

3、思路三,引入官方"https://developers.weixin.qq.com/miniprogram/dev/extended/utils/miniprogram-i18n/quickstart.html"国际化工具库。

 实践中,问题:通过前两种思路的转变,大面积更新使用方式,很多wxml 节点上原使用中文注解的词语,如果按官方,{{ t('plainText') }}
 方式,维护的时候,会很不习惯找单词。
每次想弄清楚都需要去语言包 zh.JSON 文件中键值查找。

不过 可利用 i18n.t('withParams', { value: 'Test', zh:"中文提示" }),方式,新增 zh 键值来提示,但如果 键值(zh) 在 zh.JSON 文件中
没有查找到的话,wxml表现形式
就需要在工具类文件util里新增一个函数判断校验了。
最终,官方国际化方案作为有需要多语言切换的小程序,是足够满足需求的了。 可满足形如枚举:你好{name},欢迎,语句,name需(字符串,‘0’)

1 回复

感觉有点混乱

能做个简单的demo放git上么?

这个还是很刚需的。

回到顶部