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