首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >利用WebView实现网页的i18n

利用WebView实现网页的i18n

作者头像
技术小黑屋
发布2018-09-04 17:14:12
1.1K0
发布2018-09-04 17:14:12
举报
文章被收录于专栏:技术小黑屋技术小黑屋

软件如果想在全球获得更多的用户,国际化与本地化(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源码下载

@百度网盘

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基本概念
  • 问题
  • 更Hacky的实现
    • 提供多个Locale文字资源
      • values/strings.xml
      • values-zh-rCN/strings.xml
    • 接下来的代码
      • 网页实现
        • 结果
          • Demo源码下载
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档