微信小程序笔记四：翻译小轮子weapp-i18n

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

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

源码github地址在此，记得点星：
https://github.com/brandonxiang/weapp-i18n

源码解析

这个项目源码非常简单。灵感来自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
}

使用

使用样例在brandonxiang/weapp-weatherfine中查看。这是我已经上线的小程序小好天气。

步骤

• 将weapp-i18n.js放在utils文件夹中
• 编写locales.js在app.js中引用并设置翻译语言
• 将T绑在wx对象下wx.T = T
• 在各个page下使用翻译

问题

• tabbar和title中的文字无法翻译，如有解决办法，欢迎pr或issue。

TODO

增加模版翻译功能

转载，请表明出处。总目录跨平台快速开发

请关注我的微信公众号