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

微信小程序笔记四:翻译小轮子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形式进行保存。其中,包括enzh-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

增加模版翻译功能

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

微信小程序笔记四:翻译小轮子weapp-i18n_第1张图片
请关注我的微信公众号

你可能感兴趣的:(微信小程序笔记四:翻译小轮子weapp-i18n)