小程序模板网

微信小程序笔记《四》:翻译小轮子weapp-i18n(迈向国际化)

发布时间:2017-12-08 17:44 所属栏目:小程序开发教程

正是由于微信小程序已支持个人公众号,又唤起我对小程序的一些“热情”。说实在的,它不过是一个封闭的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形式进行保存。其中,包括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

增加模版翻译功能

项目地址:https://github.com/brandonxiang/weapp-i18n 
项目地址:weapp-i18n-master.zip



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18091.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询