如何在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浏览量
33078 -
ui
+关注
关注
0文章
204浏览量
21368 -
安卓
+关注
关注
5文章
2126浏览量
57146
发布评论请先 登录
相关推荐
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以上的版本如何注册一个监听.
工商网监
评论