0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看威廉希尔官方网站 视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

如何在Autojs中优雅的使用webView

汽车电子威廉希尔官方网站 来源:安卓脚本 作者:Dcrclub 2023-03-03 13:40 次阅读

[本文适用于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
    XML
    +关注

    关注

    0

    文章

    188

    浏览量

    33068
  • ui
    ui
    +关注

    关注

    0

    文章

    204

    浏览量

    21364
  • 安卓
    +关注

    关注

    5

    文章

    2124

    浏览量

    57118
收藏 人收藏

    评论

    相关推荐

    QML加载模块 WebView 与C++代码通信控制WebView模块的隐藏与显示

    QML WebView 模块是用于在应用程序嵌入 Web 内容的模块。它提供了一个 WebView 组件,可以通过载入 URL 或 HTML 内容来显示 Web 页面。
    的头像 发表于 05-23 09:12 3432次阅读

    【鸿蒙】webview内存泄漏问题的分析报告

    1 关键字 webview;内存泄漏 2 问题描述 问题现象:在 3.1release 版本和 3.2bete1 版本,在 RK3568 上使用 etsWeb 和其他浏览器时,webview 所占
    的头像 发表于 03-02 15:12 2127次阅读

    鸿蒙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的层级?

    不管WebView在布局哪个层级,都会最外层显示出来,这个有啥处理办法吗?
    发表于 03-25 09:51

    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

    请问鸿蒙WebView如何设置字体大小?

    WebView如何设置字体大小,难道只能设置自适应??
    发表于 04-06 14:53

    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 组件。今天就为大家讲讲AndroidWebView
    发表于 10-11 10:16 0次下载

    Autojs后台静默发短信

    要判断是否发送成功和接收成功,就需要注册两个广播的监听.来得到结果.下面分别记录一下免费版Autojs和AutojsPro8.0以上的版本如何注册一个监听.
    的头像 发表于 03-03 13:47 3051次阅读

    如何使用Autojs给指定QQ好友点赞

    使用Autojs来给自己的好友点赞,复制下面的代码到autojs这个脚本工具,执行即可!
    的头像 发表于 03-03 14:24 1031次阅读