Giter Site home page Giter Site logo

710850609 / autojs-webview Goto Github PK

View Code? Open in Web Editor NEW
49.0 2.0 18.0 158 KB

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

License: Apache License 2.0

TypeScript 95.71% JavaScript 3.26% HTML 1.03%
autojs webview jsbridge h5 autojs-webview

autojs-webview's Introduction

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);

autojs-webview's People

Contributors

710850609 avatar xxx-bin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

autojs-webview's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.