如何在Autojs中優雅的使用webView
[本文適用于Autojs Pro 9.x版本]
對于需要寫UI的腳本來說,使用安卓的xml方式去寫一個好看的UI出來,在autojs中就顯得過于艱難,雖說autojs在很早之前就支持了安卓原生的方式寫UI,但對于只會js的我來說還是太難了...
但不知道從哪個版本起,autojs中封裝了一個jsBridge...
,這樣就能直接在webview的html文件中直接和autojs進行交互, 相比xml,autojs的用戶中我感覺更多的用戶是偏向于web前端的, 習慣了 html+css+js的開發, 那么今天就使用一個簡單的示例來描述一下怎么在AutojsPro版本中使用html來寫UI界面
首先我們先創建一個v9的項目,簡單規劃一下目錄結構:
main.js文件內容如下:
"ui";
$ui.layout(
"web" w="*" h="*">class="hljs-name"webview>
class="hljs-name"vertical>
);
const jsBridge = $ui.web.jsBridge;
const webRoot = $files.join( $files.cwd(), "html" );
//在webview中加載本地的html文件
$ui.web.loadUrl( `file://${webRoot}/index.html` );
//在autojs的控制臺輸出webview控制臺的消息
$ui.web.events.on( "console_message", ( event, msg ) => {
console.log( msg.message() );
} );
//在webview中調用autojs的方法
jsBridge.handle( 'show-log', () => {
$app.startActivity( "console" );
} )
.handle( "main", () => {
main();
} )
.handle( "setStatusBarColor", ( event, color ) => {
//根據web頁面的背景色來設置安卓任務欄背景色
$ui.statusBarColor( color );
} )
function main() {
//這里寫自動化腳本邏輯
console.show();
console.log( "這里執行了autojs的自動化腳本邏輯" );
sleep( 1000 );
console.info( "這里執行了autojs的自動化腳本邏輯" );
sleep( 1000 );
console.error( "這里執行了autojs的自動化腳本邏輯" );
sleep( 1000 );
console.log( "腳本執行結束" );
sleep( 2000 );
console.hide();
}
使用jsBridge的handle來定義一個方法供html調用
在html目錄下的index.html中即可使用html代碼來構建一個漂亮的UI界面了,和在瀏覽器中開發并沒有什么不同,但是如果你需要使用jQuery的話,需要注意符號需要變更一下,因為在autojs中也是用了符號(并且不能修改),所以只能修改一下jq的$符號
使用jQuery的示例:
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document<span class="hljs-name"title>
<script src="autojs://sdk/v1.js"><span class="hljs-name"script>
<script src="../javascript/jquery-3.6.1.min.js"><span class="hljs-name"script>
<style type="text/css">
body {background:#FFFFFF;color:#333;margin:0 auto;padding:0;}
div{margin:0 auto;padding:0}
.main button {width: 120px;height: 50px;}
.bottom {width:100%;}
.bottom .start {position:fixed;bottom:0px;width:100%;height:56px;display:block;}
<span class="hljs-name"style>
<span class="hljs-name"head>
<body>
<div class="main">
<button type="button">打開日志界面<span class="hljs-name"button>
<span class="hljs-name"div>
<div class="bottom">
<button type="button" class="start">運行腳本<span class="hljs-name"button>
<span class="hljs-name"div>
<script>
//注意這里需要轉換一下jq的$符號
var $jq = jQuery.noConflict();
$jq( function() {
//點擊頁面的button會打開autojs的控制臺顯示日志
$jq( ".main button" ).click( function() {
$autojs.invoke( "show-log" );
} )
//根據頁面body的背景色來設置安卓任務欄的顏色
// var bgColor = $jq( "body" ).css( "background-color" )
// console.log( bgColor );
$autojs.invoke( "setStatusBarColor", "#FFFFFF" );
//點擊開始按鈕,運行腳本邏輯
$jq( ".start" ).click( function() {
$autojs.invoke( "main" );
} );
} );
如此在html中, 你即可與autojs進行交互了, 上面的例子中,使用jq,當然你也可以使用vue來開發頁面, 亦或者使用vue-cli框架開發,具體的請參考app中的示例部分,這里不做演示, 趕緊copy代碼自己試一試吧.
必須注意的是: 在html中的head部分必須引入一個內部的js文件
<script src="autojs://sdk/v1.js">class="hljs-name"script>
聲明：本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人，不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用，如有內容侵權或者其他違規問題，請聯系本站處理。
舉報投訴
-
XML
+關注
關注
0文章
188瀏覽量
33047 -
ui
+關注
關注
0文章
204瀏覽量
21342 -
安卓
+關注
關注
5文章
2122瀏覽量
57038
發布評論請先 登錄
相關推薦
QML加載模塊 WebView 與C++代碼通信控制WebView模塊的隱藏與顯示
QML 中的 WebView 模塊是用于在應用程序中嵌入 Web 內容的模塊。它提供了一個 WebView 組件，可以通過載入 URL 或 HTML 內容來顯示 Web 頁面。
【鴻蒙】webview內存泄漏問題的分析報告
1 關鍵字 webview；內存泄漏 2 問題描述 問題現象：在 3.1release 版本和 3.2bete1 版本中，在 RK3568 上使用 etsWeb 和其他瀏覽器時，webview 所占
鴻蒙Flutter實戰：04-如何使用DevTools調試Webview
則為 Webview 的調試方法。
## 配置 Webview
CustomView.ets 文件中，在生命周期aboutToAppear處配置允許調試：
```ets
aboutToAppear
發表于 10-22 21:53
Android安全開發之WebView中的地雷
`Android安全開發之WebView中的地雷0X01 About WebView在Android開發中，經常會使用WebView來實現W
發表于 09-09 19:35
使用WebView組件實現應用與Web頁面間的通信
1. 介紹開發者如果需要在自己的應用中嵌入Web頁面，可以通過WebView組件進行開發。WebView組件派生于通用組件Component，可以像通用組件一樣使用。本教程以應用嵌入WebVi
發表于 08-26 10:39
webview組件能獲得cookie數值，但app進程一結束cookie的數值就失效是為什么？
做一個webview組件，思路如下：用戶首次登陸，cookie為空，webivew.load（url），然后通過onPageLoaded獲得cookie，再setCookie，下次用戶二次登陸可以
發表于 03-25 10:36
如何在鴻蒙的webview上面放其它組件？
需求：需要在鴻蒙的webview上顯示一個網頁，在webview上面再添加一個文本，但是無論怎么webview都會覆蓋掉其它組件，這個是鴻蒙把webview的優先級設置 最高了嗎？無論
發表于 03-28 10:00
harmonyos webview布局中創建，增加load加載布局不顯示是為什么
問題：webview布局中創建，增加load加載布局 實際運行不顯示加載布局布局中webview的ohos:height=“200vp” 指定一個高度后 load布局可以顯示
發表于 04-02 15:16
harmonyos webview布局增加load不顯示是為什么？
問題：webview布局中創建，增加load加載布局實際運行不顯示加載布局布局中webview的ohos:height=“200vp”指定一個高度后load布局可以顯示
發表于 06-13 10:19
iOS系統webview與JS的交互
昨天寫了Swift和JS的交互，既然寫了就把OC的也寫了出來： 第一部分：webview與Js的交互 第二部分：設定cookie 第三部分：修改header頭 1 交互 #import
發表于 09-25 15:41
?0次下載
深入理解WebView
摘要 作為Android開發者，我們都知道在手機中內置了一款高性能 webkit 內核瀏覽器，在 SDK 中封裝為一個叫做 WebView 組件。今天就為大家講講Android中WebView
發表于 10-11 10:16
?0次下載
Autojs后臺靜默發短信
要判斷是否發送成功和接收成功,就需要注冊兩個廣播的監聽.來得到結果.下面分別記錄一下免費版Autojs和AutojsPro8.0以上的版本如何注冊一個監聽.
工商網監
評論