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’)
我一直按照官方的步骤,可是在报错WAService.js:1 Uncaught Error: module "npm/@miniprogram-i18n/core/lib/index.js" is not defined
1、npm init
2、npm install
3、cd ../example
4、npm init
5、npm run build ,,若这里失败,再 npm install
6、npm run build 成功
感觉有点混乱
能做个简单的demo放git上么?
这个还是很刚需的。