小程序的国际化i18n的使用，js的data里绑定i18n国际化数据

小程序的国际化i18n的使用，js的data里绑定i18n国际化数据

1.i18n国际化数据文件：locales.wxs和locales.js

locales.wxs用到.wxml文件中，locales.js用到.js文件中

locales.wxs文件的代码如下：

var fallbackLocale = 'zh-CN'; var translations = { "en-US": { "logo.title": "title", }, "zh-CN": { "logo.title": "标题", }; var Interpreter = function (r) { var i = ""; function o(r, n) { return r ? "string" == typeof r ? r : r.reduce(function (r, t) { return r.concat([function (n, e) { if (e = e || {}, "string" == typeof n) return n; if (n[2] && "object" == typeof n[2]) { var r = Object.keys(n[2]).reduce(function (r, t) { return r[t] = o(n[2][t], e), r }, {}), t = r[e[0]], u = e[n[0]]; return void 0 !== u ? r[u.toString()] || r.other || i : t || (r.other || i) } if ("object" == typeof n && 0 < n.length) { return function r(t, n, e) { void 0 === e && (e = 0); if (!n || !t || t.length <= 0) return ""; var u = n[t[e]]; if (!u) return "{" + t.join(".") + "}"; if ("string" == typeof u) return u; if ("number" == typeof u) return u.toString(); return r(t, u, ++e) }(n[0].split("."), e, 0) } return "" }(t, n)]) }, []).join("") : i } function f(r, t, n) { var e = r[t]; if (!e) return n; var u = e[n]; return u || n } return r.getMessageInterpreter = function (e, u) { function i(r, t, n) { return o(function (r, t, n, e) { var u = t[n]; if (!u) return f(t, e, r); var i = u[r]; return i || f(t, e, r) }(r, e, n, u), t) } return function (r, t, n) { return 2 === arguments.length ? i(r, null, t) : 3 !== arguments.length ? "" : i(r, t, n) } }, r }({}); module.exports.t = Interpreter.getMessageInterpreter(translations, fallbackLocale)

locales.js代码如下：

module.exports.fallbackLocale = 'zh-CN'; module.exports.defaultLocale = 'zh-CN'; module.exports.translations = { "en-US": { /** * 轮胎 */ "app.tyre.Mileage": 'Mileage', }, "zh-CN": { /** * 轮胎 */ "app.tyre.Mileage": '里程', } };

2.在.wxml中使用locales.wxs

头部引入：

<wxs src="../../i18n/locales.wxs" module="i18n" />

使用：i18n.t(“logo.title”,$_locale)

<view class="flex-item text-overflow">{{i18n.t("logo.title",$_locale)}}</view>

3.在.js中使用locales.js

头部引入：

import { I18n, getI18nInstance } from '@miniprogram-i18n/core';

注入：

behaviors: [I18n], // 注入

在方法中使用，this就已经有了I18n暴露的方法t()，也可用“I18n.t()”，例如：

onShow: function () { wx.setNavigationBarTitle({ title: this.t('app.tyre.Mileage'), // this.t('app.tyre.Mileage') 就可得到'Mileage'或'里程'，也可使用I18n.t('app.tyre.Mileage') }); }

但这种方法不适用于与在Page({data:{// 变量初始化}})，因为data作为对象，this会指向data对象，所以不行。这个时候需要全局实例化引入的getI18nInstance()，然后在使用。还可以通过this.setData()实现

方法一、实例化：

const II18n = getI18nInstance(); Page({ data:{ mileage.("app.tyre.Mileage"), // 可得到'Mileage'或'里程' } })

方法二、this.setData()

this.setData({ mileage.("app.tyre.Mileage"), // 可得到'Mileage'或'里程' });