专栏首页技术小黑屋利用WebView实现网页的i18n

利用WebView实现网页的i18n

软件如果想在全球获得更多的用户,国际化与本地化(internationalization and localization 简称:i18n 和L10n)是非常必要的。本文将介绍一个很geeky的方法来利用webview实现html的i18n。

基本概念

国际化是指在设计软件,将软件与特定语言及地区脱钩的过程。当软件被移植到不同的语言及地区时,软件本身不用做内部工程上的改变或修正。本地化则是指当移植软件时,加上与特定区域设置有关的信息和翻译文件的过程。

国际化和本地化之间的区别虽然微妙,但却很重要。国际化意味着产品有适用于任何地方的“潜力”;本地化则是为了更适合于“特定”地方的使用,而另外增添的特色。用一项产品来说,国际化只需做一次,但本地化则要针对不同的区域各做一次。 这两者之间是互补的,并且两者合起来才能让一个系统适用于各地。

上述摘自维基百科 国际化与本地化

问题

如何实现网页的国际化和本地化,支持更多的语言呢?最简单的逻辑可能类似如下伪代码实现

lineos:false

1 2 3 4 5

if (isChinese) { lable.innerText = "中文" } else if (isEnglish) { lable.innerText = "English" }

但是这样是很有问题的,如果增加了语言必然要修改代码代码,违背了对修改关闭的原则。所以上述并不是一种很好的方法

更Hacky的实现

实现思路主要是借助强大的Android系统的资源适配机制(基于设备设备的信息Locale等匹配最合适的资源)。貌似这个是Chrome中网页实现i18n的逻辑。实现步骤主要如下

  • Android程序提供必要多个Locale的资源
  • 将网页需要的文字资源组成JSON交换格式
  • WebView注入一个变量,变量内容为上一步的JSON数据
  • 网页实现读取资源,为元素设置内容
  • 加载网页

提供多个Locale文字资源

values/strings.xml

lineos:false

1 2 3 4 5

<?xml version="1.0" encoding="utf-8"?> <resources> <string name="city_beijing">Beijing</string> <string name="country_china">China</string> </resources>

values-zh-rCN/strings.xml

lineos:false

1 2 3 4 5

<?xml version="1.0" encoding="utf-8"?> <resources> <string name="city_beijing">北京</string> <string name="country_china">中国</string> </resources>

接下来的代码

lineos:false

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

WebView myWebView = new WebView(this); addContentView(myWebView, new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); //将网页需要的文字资源组成JSON交换格式 JSONObject jsObj = new JSONObject(); try { jsObj.put("country", getString(R.string.country_china)); jsObj.put("city", getString(R.string.city_beijing)); } catch (JSONException e) { e.printStackTrace(); } //WebView注入一个变量,变量内容为上一步的JSON数据 String injectString = "var textRes = " + jsObj; Log.i(LOGTAG, "injuectString = " + injectString); WebSettings settings = myWebView.getSettings(); settings.setJavaScriptEnabled(true); myWebView.loadUrl("javascript:" + injectString); myWebView.loadUrl("file:///android_asset/location.html");

网页实现

lineos:false

1 2 3 4 5 6 7 8 9 10 11 12 13

<html> <head> <title>i18n Test</title> </head> <body> <label id="country"></label> <lable id="city"></lable> </body> <script type="text/javascript"> document.getElementById('country').innerText= textRes.country document.getElementById('city').innerText = textRes.city </script> </html>

结果

  • 当系统语言为中文简体环境下网页显示中国 北京
  • 当系统语言为非中文简体环境下网页显示China Beijing

Demo源码下载

@百度网盘

其他

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 树莓派 Gitlab问题整理

    技术小黑屋
  • Java细节:字符串的拼接

    工作日忙于项目的逻辑实现,周六有点时间,从书柜里拿出厚厚的英文版Thinking In Java,读到了字符串对象的拼接。参考着这本书做个翻译,加上自己思考的东...

    技术小黑屋
  • JvmName 注解在 Kotlin 中的应用

    JvmName注解是Kotlin提供的一个可以变更编译器输出的注解,这里简单的介绍一下其使用规则。

    技术小黑屋
  • LeetCode51. N皇后

    mathor
  • Cypress系列(11)- Cypress 编写和组织测试用例篇 之 动态生成测试用例

    https://www.cnblogs.com/poloyy/category/1768839.html

    小菠萝测试笔记
  • 【图片版】CSS网格布局(Grid)完全教程

    CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内...

    毛瑞
  • 全过程项目结构总结

        前两天在另外一个部门学习了他们的系统架构和框架。下面是自己在张上画的结构图: ?

    用户1172223
  • 高并发网站/服务常规应对方案和思路

    作为后端的程序开发人员,经常听到高并发,但是高并发到底有多高?其实是没有数值定义的

    KenTalk
  • 基于Fusioncharts的报表统计

    本博客介绍fusioncharts插件的使用 先了解fusioncharts插件,fusioncharts是一款基于XML和flash的报表组件,支持Jav...

    SmileNicky
  • Excel应用实践19:根据工作表某列中的值从另一工作簿中获取数据

    在下图1所示的工作簿Data.xlsx的工作表Sheet1中,存放着待使用的数据。

    fanjy

扫码关注云+社区

领取腾讯云代金券