微信小程序笔记《四》：翻译小轮子weapp-i18n（迈向国际化）

发布：2017-12-08 17:44浏览：次来源：网络作者：tianshu

正是由于微信小程序已支持个人公众号，又唤起我对小程序的一些“热情”。说实在的，它不过是一个封闭的web框架。语法上，有点像vue，但是它单项绑定的特性，又有点像react。总的来 ...

正是由于微信小程序已支持个人公众号，又唤起我对小程序的一些“热情”。说实在的，它不过是一个封闭的web框架。语法上，有点像vue，但是它单项绑定的特性，又有点像react。总的来说，借用知乎上的一句话就是，“四不像”。我自己有一个想法，就是按照它的语法，将它做成一个支持virtual dom的web框架，兼容它的所有接口，于此同时，native的接口可以用cordova替换。其实，这样的想法早就有人想过，像phodal大神的phodal/winv就是一个非常好的原型，只不过没有很好的持续下去。说真的，有时候我搞不懂alloyteam为啥要自己搞一套omi?

题外话说多了。考虑到小程序是迈向国际化的，怎么能不考虑做成i18n的翻译工具。就此，我造了一个小轮子，欢迎大家使用和fork。

源码解析

这个项目源码非常简单。灵感来自Leaflet.i18n。

设置翻译内容

设置翻译内容要在application的onLaunch时（或前）设置。

T.registerLocale = function (locales) {
    T.locales = locales;
}

翻译内容以js的对象或json形式进行保存。其中，包括en和zh-Hans分别对应了英语和简体中文。当然，你可以自定义很多其他语言，如法语，日语。内部对象的key帮助你获取翻译语言。

export default {
    "en": {
        "Weather": "Weather"
    },
    "zh-Hans": {
        "Weather": "天气"
    }
}

切换翻译语言

该方法用于切换语言的类型，code指的是语言类型，如en指的是英语，zh-Hans指的是简体中文。

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
}