@EncyKe 2016-10-26T02:51:11.000000Z 字数 2611 阅读 1624

手记：移动客户端 WebView 夜间模式及字号调整的实现

#手记

手记：移动客户端 WebView 夜间模式及字号调整的实现

1. 需求

公司的两大移动客户端 Android 和 iOS App 都是基于 WebView 开发，最近同时都有添加 夜间模式 和 字号大小调整 的功能需求。

夜间模式下，标题、文字、标签及其它控件颜色有变化，图片加蒙层遮罩；
夜间模式在用户设置中触发，触发后下次进入保持夜间模式，直至被取消；
字号调整，有小、中（默认）、大、最大等四种模式；
同夜间模式，字号调整在触发后保持，直至用户取消；

上述需求在两种移动客户端的 WebView 实现大同小异，在具体实现中，Andriod 端对于 WebView 的依赖或耦合可能更高，需要前端为其提供的帮助较 iOS 更多。

2. 思路

2.1. 两种模式的样式实现

夜间模式经由为 body 追加 .night 类名实现样式；
字号调整同理，如：body.small, body.middle, body.large, body.extremeLarge；
默认样式下 body 类名留空即可；

示例代码如下：

/* 注意 body.night 后的选择器尽量与原来的保持一致，已实现覆盖 */
body.night .components {
/* 夜间模式 color, background, border 等等设置 */
}
/* 图片蒙层，注意 -webkit- 兼容 */
img {
-webkit-filter: none;
filter: none;
}
body.night img {
-webkit-filter: brightness(.4);
filter: brightness(.4);
}
/* small | middle | large | extremeLarge */
body.small .components {
/* 字号调整 font-size, line-height 等设置 */
}

2.2. 两种模式的触发

使用 JS 函数为 body 设定模式名称。

/**
* 设置白天/夜间模式
* @param  {String} mode - night 为夜间模式、其它则为白天模式
*/
function changeArticleCurrentMode(mode) {
if (mode === 'night') {
  document.body.classList.add(mode);
} else {
  document.body.classList.remove('night');
}
}
/**
* 设置字号模式
* @param  {String} size - small | middle | large | extremeLarge
*/
function changeArticleFontSize(size) {
var modeList = [
  'small',
  'middle',
  'large',
  'extremeLarge'
];
for (var i = 0, modeLen = modeList.length; i < modeLen; i++) {
  document.body.classList.remove(modeList[i]);
}
document.body.classList.add(size);
}

2.3. 对接客户端

用户触发时，直接由客户端开发调用两枚 JS 函数；
保持模式可使用插值的方式，由客户端开发控制 body 的类名插值为 night 或其它；
对于为 Android 提供的 WebView.html，不可出现注释或中文，否则有不愉快的 bug 出现，目前原因未明；

3. 其它：base64 编码图片小记

由于 WebView 文件的特殊性，引用图片测试 debug 有一定难度，一般都选用 base64 编码（data:[][;charset=][;base64],）图片作为图片引入测试首选。以下提供一些转码工具。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Upload Image to Base64</title>
</head>
<body>
  <div>
    <input id="input" type='file' />
  </div>
  <div>
    <img id="img">
  </div>
  <textarea id="b64" style="width: 80%; min-height: 200px; display: none;"></textarea>
  <script type="text/javascript">
    function el(id) {
      return document.getElementById(id);
    }
    function readFile() {
      if (this.files && this.files[0]) {
        var fileReader = new FileReader();
        fileReader.onload = function(e) {
          el("img").src       = e.target.result;
          el("b64").innerHTML = e.target.result;
          el("b64").style.display = 'block';
        };
        fileReader.readAsDataURL( this.files[0] );
      }
    }
    function toDataUrl(src, callback, outputFormat) {
      var img = new Image();
      img.crossOrigin = 'Anonymous';
      img.onload = function() {
        var canvas = document.createElement('CANVAS');
        var ctx = canvas.getContext('2d');
        var dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
      };
      img.src = src;
    }
    el("input").addEventListener("change", readFile, false);
  </script>
</body>
</html>

附：参考

【前端攻略】：玩转图片Base64编码