微信小程序国际化

现状

小程序国际化官方没有支持,也没有现成的插件。

网上有人做了国际化的尝试。但是只能替换静态文本,就是简单的键值匹配。

vue-i18n 由于是基于 htmlvue, 不同于wxml(尤其是不能修改dom),估计进行hack调研可能要花很多时间。

方案

本项目(github 源码)是一个可以直接运行的国际化的小程序 quickstart 项目。

下载后可以直接在 微信开发者工具中运行。

介绍

如果想让翻译的内容渲染在页面中,需要把翻译的数据放在 Page 的 data 中,对于动态渲染带可变参数的数据, 在 setData 的时候加个尾巴(在其后面set 带参数的翻译的 data)。

目前基本方案是自己开发一套翻译工具:

  • 功能:

    1. 翻译静态文案

    2. 翻译带参数的文案

    *缺陷

    1.由于只能返回字符串,没有类似vue 通过 v-html 进行标签替换的能力,所以对带标签(样式)的翻译无能为力。

总结:

优先保证中文用户的使用体验,对于不带标签的类型的翻译,中英文没有区别,对于带标签的类型的翻译,将中文翻译直接放在 wxml 中,只是在中文的情况下显示,在非中文时直接隐藏。

代码

// i18n.js
module.exports = {
locale: 'en',
locales: {},
registerLocale (locales) {
this.locales = locales
},
setLocale (code) {
this.locale = code
},
/**
* 返回带(或不带)参数的类型的翻译结果
* @param {string} key, /util/language/en.js 中的键名,如 "curslide"
* @param {object} data, 传入的参数,如 {num: 123}
* @returns {string}
*
* @desc 如:"activeno": "当前学生{activeno}位",
* activeno 为 key,可以输入data {activeno: 15}
* 返回:"当前学生15位"
*/
_ (key, data) {
let locale = this.locale
let locales = this.locales
let hasKey = locale && locales[locale] && locales[locale][key] if (hasKey) {
key = locales[locale][key] let res = key.replace(/\{[\s\w]+\}/g, x => {
x = x.substring(1, x.length-1).trim()
return data[x];
}) return res
} throw new Error(`语言处理错误${key}`)
},
/**
* 返回二选一类型的翻译结果
* @param {string} key, /util/language/en.js 中的键名,如 "curslide"
* @param {object} data, 传入的参数,如 {first: true} 选择前面的
* @returns {string}
*
* @desc 如:"sendprob": "Send | Check",
* sendprob 为 key,可以输入data {first: true}
* 返回:"Send"
*/
_b (key, data) {
let locale = this.locale
let locales = this.locales
let hasKey = locale && locales[locale] && locales[locale][key] if (hasKey) {
key = locales[locale][key] let res = key.split('|')[data.first ? 0 : 1].trim() return res
} throw new Error(`语言处理错误${key}`)
}
}

微信小程序国际化的更多相关文章

  1. 微信小程序-国际化(miniprogram-i18n)

    前情提要 最近维护了一个微信小程序的老项目,维护的其中一项是添加国际化.由于踩了蛮多坑,所以就有了这篇文档!!! miniprogram-i18n 对除小程序外的其他框架开发做过国际化的朋友来说i18 ...

  2. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

  3. 官方问答--微信小程序常见FAQ (17.8.21-17.8.27)

    给提问的开发者的建议:提问之前先查询 文档.通过社区右上角搜索搜索已经存在的问题. 写一个简明扼要的标题,并且正文描述清楚你的问题. 提交 BUG:需要带上基础库版本号,设备信息(iOS, Andro ...

  4. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  5. 微信小程序体验(2):驴妈妈景区门票即买即游

    驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...

  6. 微信小程序(微信应用号)组件讲解

    这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...

  7. 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新

    微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...

  8. 通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...

  9. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

随机推荐

  1. 如何利用工具提高你的 Android 代码质量

    在这篇文章中,我将通过不同的自动化工具如CheckStyle,FindBugs,PMD以及Android Lint来介绍(如何)提高你的安卓代码质量.通过自动化的方式检查你的代码非常有用,尤其当你在一 ...

  2. 01-oracle限定查询-20190404

    关系型数据库和半结构化数据(xml文件) oracle12c:c代表云计算 PDB,CDB sql语句执行顺序: 第一步:from子句控制数据来源: 第二步:where子句使用限定符对数据行过滤: 第 ...

  3. linux 输出 之 nl 命令

    1.命令格式:nl [选项]... [文件]... 2.命令参数: -b  :指定行号指定的方式,主要有两种: -b a :表示不论是否为空行,也同样列出行号(类似 cat -n): -b t :如果 ...

  4. c#实现常用排序算法

    让我们先看一看常用排序算法的效率对比 接着请看代码和注释~ using System; using System.Collections.Generic; using System.Linq; usi ...

  5. tomcat局域网内发布html

    1. 保证tomcat装好,启动 验证:浏览器输入:localhost:8080,看到下面页面表示成功 2. 把html文件或包含html的目录拷到Apach安装目录的Root目录下 (例如:C:\P ...

  6. WPF中嵌入Skyline提供的COM组件填坑

    网上有很多关于在WPF中使用的Skyline提供的COM组件的教程,但大都雷同一律,其中很多的细节均为涉及,本文意在在其原基础上进行一些细节的补充. 工具:Visual Studio 2017 1.  ...

  7. Linux IO

    Linux 系统编程(IO) 工具 strace: 根据系统调用 od -tcx: 查看二进制 函数参数 使用const修改的指针为传入参数 不使用const的指针为传出参数 string操作的函数 ...

  8. 动态添加LInk的分析

    动态创建HyperLink超链接: 1.如果添加HyperLink的代码只写在Button中,则只会显示最后一次添加的内容.所以必须在Pageload中添加. 2.首次载入: PageLoad    ...

  9. c# 使用队列保存图片

    Invoke(new EventHandler(delegate { Bitmap bitmap2 = (Bitmap)eventArgs.Frame.Clone(); ThreadPool.Queu ...

  10. sp_addlinkedserver创建远程服务器查询

    远程服务器查询可以分两步完成: 1.建立连接服务器 exec sp_addlinkedserver @server='Test_Server', --被访问的服务器别名 @srvproduct='', ...