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