258资源分享网

正是由于微信小程序已支持个人公众号，又唤起我对小程序的一些“热情”。说实在的，它不过是一个封闭的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 } 使用

使用样例在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