autojs正經的交互-安卓與webview

牙叔教程簡單易懂

效果展示

效果.gif

緣起

我一直覺得現在的autojs和webview交互不正經,

監聽彈框
監聽console日志
監聽網頁title
監聽url

尤其是監聽彈框, 直接dismiss, 那那些需要彈框的網頁怎麼辦?

環境

Autojs版本: 9.0.4

Android版本: 8.0.0

思路

autojs作為發出命令方, webview作為執行命令方, 使用方法: webView.evaluateJavascript
webview作為發出命令方, autojs作為執行命令方, 使用方法: webView.addJavascriptInterface

你將學到以下知識點

獲取隨機顏色
改變網頁背景色
改變按鈕背景色
evaluateJavascript的回調函數
addJavascriptInterface的回調函數
@JavascriptInterface注解的使用
java類的內部interface

代碼講解

1. 創建類JSInterface, 然後打包成dex給autojs調用

package com.yashu.simple;
import android.webkit.JavascriptInterface;
public class JSInterface {
private JSCallback jsCallback;
public JSInterface setJsCallback(JSCallback jsCallback) {
this.jsCallback = jsCallback;
return this;
}
@JavascriptInterface
public void share(String callback) {
if (jsCallback != null) {
jsCallback.jsShare(callback);
}
}
public interface JSCallback {
void jsShare(String callback);
}
}
複制代碼

2. 網頁

<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script language="javascript"> function onButtonClick() { function randomHexColor() { //隨機生成十六進制顏色 return "#" + ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6); } let color = randomHexColor(); jsInterface.share(color); } </script> </head>
<body> <img id="image" width="328" height="185" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" /> <button type="button" style="width: 328px; height: 185px; font-size: 40px" onclick="onButtonClick()"> 改變安卓按鈕顏色 </button> </body>
</html>
複制代碼

3. 加載dex並導入類JSInterface

let dexPath = files.path("./classes2.dex");
runtime.loadDex(dexPath);
importClass(android.webkit.JavascriptInterface);
importClass(android.webkit.WebViewClient);
importClass(android.webkit.ValueCallback);
importClass(android.webkit.WebChromeClient);
importClass(com.yashu.simple.JSInterface);
複制代碼

4. UI界面

ui.layout(
<vertical> <text text="牙叔教程 簡單易懂" textSize="28sp" textColor="#fbfbfe" bg="#00afff" w="*" gravity="center"></text> <webview id="webview" /> <button id="button" text="改變網頁body顏色" /> </vertical>
);
複制代碼

5. 設置webview屬性

let webView = ui.findById("webview");
webView.getSettings().setJavaScriptEnabled(true);
複制代碼

6. 設置按鈕點擊事件

// 發出命令方: Android
// 執行命令方: Html
// Html返回值: body背景色
ui.button.click(function () {
function test() {
function randomHexColor() {
//隨機生成十六進制顏色
return "#" + ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6);
}
document.body.bgColor = randomHexColor();
return "牙叔教程, " + document.body.bgColor;
}
let js = test.toString() + ";test();";
let valueCallback = new ValueCallback({
onReceiveValue: function (value) {
toastLog("網頁返回值: " + value);
},
});
webView.evaluateJavascript(js, valueCallback);
});
複制代碼

7.網頁日志日志打印到控制臺, 方便查看錯誤

webView.setWebChromeClient(
new JavaAdapter(WebChromeClient, {
onConsoleMessage: function (message) {
message.message && log("h5: " + message.message());
},
})
);
複制代碼

8. JSInterface的使用方法

// 重點, 這裏給html注册了一個全局對象: jsInterface
webView.addJavascriptInterface(new JSInterface().setJsCallback(new JSCallback()), "jsInterface");
複制代碼

9. 加載網頁

html = files.path("./index.html");
webView.loadUrl("file://" + html);
複制代碼

名人名言

思路是最重要的, 其他的百度, bing, stackoverflow, 安卓文檔, autojs文檔, 最後才是群裏問問 --- 牙叔教程

聲明

部分內容來自網絡本教程僅用於學習, 禁止用於其他用途