Skip to content

autojs的webView实现,支持初始化脚本注入、jsBridge两端互调

License

Notifications You must be signed in to change notification settings

710850609/autojs-webView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

autojs-webView

autojs的webView实现,支持初始化脚本注入、jsBridge两端互调

一、功能介绍

  • 1 支持启动时注入自定义JavaScript脚本
  • 2 webview输出到autojs控制台
  • 3 支持渲染markdown文件
  • 4 支持jsBridge,H5端调用安卓端autojs方法
  • 5 支持inent url打开app页面
  • 6 支持vconsole
  • 7 支持debug模式
    • 需要在电脑Chrome内核浏览器上访问 chrome://inspect/#devices

二、项目结构说明

autojs-webView
├── LICENSE
├── README.md
├── expand -------------------------------------->  webView扩展功能目录
   ├── core ------------------------------------>  webView扩展核心目录
      ├── jsBridge.ts ------------------------->  
      ├── vConsole.ts ------------------------->  
      ├── vconsole.min.ts --------------------->  
      └── webViewExpand.js -------------------->  webView扩展API
   ├── handler --------------------------------->  
      ├── bridgeHandler.js -------------------->  autoJs提供给网页调用的方法
      └── webErrorHandler.js ------------------>  
   └── inject ---------------------------------->  页面注入JavaScript脚本文件
       └── demo.ts ----------------------------->  页面注入JavaScript脚本例子
├── main.js ------------------------------------->  
└── project.json -------------------------------->  

三、webViewExpand.js 方法说明

1 init(webViewWidget, jsFileList [, supportVConsole])

初始化扩展支持,页面加载完时注入脚本

- webViewWidget: webView组件
- jsFileList: 待注入的多个脚本文件路径,数组格式
- supportVConsole: 是否支持VConsole, 默认false

2 showMarkdown(markdownFilePath)

webView渲染MarkDown文件,基于 markedjs 实现

- markdownFilePath: markdown文件绝对路径

3 callJavaScript(webViewWidget, script [, callback])

autoJs在网页执行JavaScript代码

- webViewWidget: webView组件
- script: JavaScript脚本
- callback: 执行完回调函数

三、网页调用autoJs方法说明

1 定义autoJs方法的方法名、入参数据结构、返回值的数据结构

扩展对出入参的数据格式都规定为JSON,这里只需要定义JSON的数据结构即可

2 提供autoJs被调用的方法实现

bridgeHandler.js 中定义,并注册到 module.exports 中 例如

/**
 * 处理逻辑例子: toast 提示
 */
function toastAction(params) {
    toast(params.msg);
    return {msg: 'toast提示成功'};
}
module.exports = {
    handle: handle,
    // 注册被调用方法
    toast: toastAction
}

3 执行webViewExpand.init方法,开启webView扩展

webViewExpand.init(ui.webView, ["expand/inject/demo.ts"], true);

4 在网页中调用autoJs方法

"ui";
ui.layout(
    <vertical>
        <webview id="webView" layout_below="title" w="auto" h="auto" />
    </vertical>
);

// 在页面中调用autoJs方法
let js = "try{window.Android.invoke('toast', " + 
"{msg: '测试jsBridge1'}, " +
"(data) => {" +
"    console.log('接收到callback1:' + JSON.stringify(data));" +
"}" +
");}catch(e){console.trace(e)}";
let webViewExpand = require("expand/core/webViewExpand.js");

// 开启webView扩展
webViewExpand.init(ui.webView, [], true);
// 加载页面 */
ui.webView.loadUrl("https://cn.bing.com/");
// 等待页面加载完,或是在init方法中注入JavaScript脚本文件触发执行
setTimeout(() => {
    webViewExpand.callJavaScript(ui.webView, js);
}, 2000);