小程序国际化实现方式

我不是女神ヾ 2022-04-17 06:45 326阅读 0赞

话不多说，上代码。

首先需要一个工具类：locales.js

>     // Time 为事例值
>     export default {
>     
>       //英文
>       "en": {
>     
>            "Time":"Time"
>     
>        },
>     
>       //中文
>       "zh-cn": {
>     
>             "Time":"时间"
>     
>        },
>     
>       //繁体
>       "zh-hk": {
>     
>             "Time":"時間"
>     
>        }
>     }
> 
>

然后是另一个工具类:wxapp-i18n.js

>     let T = {}
>     T.locale = null
>     T.locales = {}
>     
>     T.registerLocale = function (locales) {
>         T.locales = locales;
>     }
>     
>     T.setLocale = function (code) {
>         T.locale = code
>     }
>     
>     T._ = function (line, data) {
>         const locale = T.locale
>         const locales = T.locales
>         if (locale && locales[locale] && locales[locale][line]) {
>             line = locales[locale][line]
>         }
>     
>         return line
>     }
>     
>     export default T
> 
>

然后在 app.js 中引入文件并做处理.

>     //国际化
>     import locales from './utils/locales'
>     import T from './utils/wxapp-i18n'
>     
>     // 数据注入
>     T.registerLocale(locales)
>     try {
>       // 获取系统设置的语言格式
>       var value = wx.getStorageSync('language')
>       if (value) {
>         T.setLocale(value)
>       } else {
>         T.setLocale('zh-hk')//默认显示繁体
>       }
>     } catch (e) {
>       T.setLocale('zh-hk')//默认显示繁体
>     }
>     wx.T = T

使用方式如下, 假设需要在index.wxml中使用国际化,则在index.js中书写:

>     setLang() {
>             const _ = wx.T._
>             this.setData({
>               Time: _('Time')
>             })
>      }
> 
> \-- setLang 是自定义方法,可以在 OnLoad中调用此方法.

那么这样,就可以达到一个 小程序实现国际化的目的了!