[关闭]
@EncyKe 2016-10-26T02:51:11.000000Z 字数 2611 阅读 1577

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

#手记



1. 需求

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

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

2. 思路

2.1. 两种模式的样式实现

示例代码如下:

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

2.2. 两种模式的触发

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

  1. /**
  2. * 设置白天/夜间模式
  3. * @param {String} mode - night 为夜间模式、其它则为白天模式
  4. */
  5. function changeArticleCurrentMode(mode) {
  6. if (mode === 'night') {
  7. document.body.classList.add(mode);
  8. } else {
  9. document.body.classList.remove('night');
  10. }
  11. }
  12. /**
  13. * 设置字号模式
  14. * @param {String} size - small | middle | large | extremeLarge
  15. */
  16. function changeArticleFontSize(size) {
  17. var modeList = [
  18. 'small',
  19. 'middle',
  20. 'large',
  21. 'extremeLarge'
  22. ];
  23. for (var i = 0, modeLen = modeList.length; i < modeLen; i++) {
  24. document.body.classList.remove(modeList[i]);
  25. }
  26. document.body.classList.add(size);
  27. }

2.3. 对接客户端

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Upload Image to Base64</title>
  6. </head>
  7. <body>
  8. <div>
  9. <input id="input" type='file' />
  10. </div>
  11. <div>
  12. <img id="img">
  13. </div>
  14. <textarea id="b64" style="width: 80%; min-height: 200px; display: none;"></textarea>
  15. <script type="text/javascript">
  16. function el(id) {
  17. return document.getElementById(id);
  18. }
  19. function readFile() {
  20. if (this.files && this.files[0]) {
  21. var fileReader = new FileReader();
  22. fileReader.onload = function(e) {
  23. el("img").src = e.target.result;
  24. el("b64").innerHTML = e.target.result;
  25. el("b64").style.display = 'block';
  26. };
  27. fileReader.readAsDataURL( this.files[0] );
  28. }
  29. }
  30. function toDataUrl(src, callback, outputFormat) {
  31. var img = new Image();
  32. img.crossOrigin = 'Anonymous';
  33. img.onload = function() {
  34. var canvas = document.createElement('CANVAS');
  35. var ctx = canvas.getContext('2d');
  36. var dataURL;
  37. canvas.height = this.height;
  38. canvas.width = this.width;
  39. ctx.drawImage(this, 0, 0);
  40. dataURL = canvas.toDataURL(outputFormat);
  41. callback(dataURL);
  42. };
  43. img.src = src;
  44. }
  45. el("input").addEventListener("change", readFile, false);
  46. </script>
  47. </body>
  48. </html>

附:参考

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注