​
WebView JavaScript处理器

​
核心API

​
工作流程

​
入门示例：文本反转

1

创建HTML文件

创建 javascriptWebViewProcessor.html：
<!DOCTYPE html>
<html>
<head><title>文本反转</title></head>
<body onload="processJavascript();">
<script>
    var input = window.AppInventor.getWebViewString();
    var result = input.split("").reverse().join("");
    window.AppInventor.setWebViewString(result);
</script>
</body>
</html>
2

上传HTML文件

在 App Inventor 中上传 HTML 文件到 Media
3

配置组件

组件名称
TextBoxStringToBeProcessed
ButtonbtnProcess
WebViewerWebViewer1
ClockClock1
4

编写积木块

当 Screen1.初始化 时
  设置 WebViewer1.HomeUrl = "file:///android_asset/javascriptWebViewProcessor.html"

当 btnProcess.点击 时
  设置 WebViewer1.WebViewString = TextBox1.文本

当 Clock1.定时 时
  如果 WebViewer1.WebViewString ≠ TextBox1.文本 则
    // 处理完成
    调用 Notifier1.显示消息框("结果: " + WebViewer1.WebViewString)
  如果结束

​
高级应用

Base64加密/解密

<script>
function process() {
    var input = window.AppInventor.getWebViewString();
    var parts = input.split("|");
    var mode = parts[0];
    var text = parts[1];
    
    var result = "";
    if (mode === "encode") {
        result = btoa(unescape(encodeURIComponent(text)));
    } else {
        result = decodeURIComponent(escape(atob(text)));
    }
    window.AppInventor.setWebViewString(result);
}
</script>
下载 CryptoJS 库并上传：
<script src="md5.min.js"></script>
<script>
function calculateMD5() {
    var input = window.AppInventor.getWebViewString();
    var hash = MD5(input);
    window.AppInventor.setWebViewString(hash);
}
</script>
使用 QRCode.js 库：
<script src="qrcode.min.js"></script>
<script>
var text = window.AppInventor.getWebViewString();
new QRCode(document.getElementById("qrcode"), text);
// 返回Base64图片
</script>
使用 Canvas 处理图像：
var img = new Image();
img.onload = function() {
    // 绘制到Canvas
    ctx.drawImage(img, 0, 0);
    // 获取像素数据
    var data = ctx.getImageData(0, 0, w, h).data;
    // 转灰度
    for (var i = 0; i < data.length; i += 4) {
        var avg = (data[i] + data[i+1] + data[i+2]) / 3;
        data[i] = data[i+1] = data[i+2] = avg;
    }
    // 返回Base64
    window.AppInventor.setWebViewString(canvas.toDataURL());
};

​
实用JavaScript库

​
常见问题

检查：
  • HTML文件是否上传到 Media
  • HomeUrl 路径是否正确
  • debugMode 下和打包后的路径不同
检查：
  • window.AppInventor 函数是否拼写正确
  • setWebViewString 是否在页面加载完成后调用
  • 是否有JavaScript错误
本教程基于 Rich Interdonato（MIT Master Trainer）的原创教程：
WebView Javascript Processor
采用 CC BY-SA 4.0 授权