@EncyKe
2016-10-26T02:51:11.000000Z
字数 2611
阅读 2082
#手记
公司的两大移动客户端 Android 和 iOS App 都是基于 WebView 开发,最近同时都有添加 夜间模式 和 字号大小调整 的功能需求。
上述需求在两种移动客户端的 WebView 实现大同小异,在具体实现中,Andriod 端对于 WebView 的依赖或耦合可能更高,需要前端为其提供的帮助较 iOS 更多。
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 等设置 */
}
使用 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);
}
body
的类名插值为 night 或其它;由于 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>