网页界面

M8Test 支持使用静态网站作为脚本界面，你也可以采用 Vue、Angular 或 React 等框架进行开发。只需将框架生成的静态网站文件放置在 webview 目录下，且静态网站的首页必须命名为 index.html 。当然，我们更推荐使用 AI 直接生成静态网站，AI 完全有能力高效创建美观的界面。

下面演示一个使用最简单的静态网站作为脚本界面的开发过程，只需两个文件：index.html 和 index.js。虽然也可以将 index.js 的内容直接嵌入到 index.html 中，但推荐将 JS 和 HTML 分开编写。

首先是 index.html 文件，其功能非常简单，仅包含一个按钮并引用 index.js 文件，内容如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebView UI</title> <link href="https://fastly.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> </head> <body> <button id="button" type="button" class="btn btn-primary">Primary</button> <script src="./index.js"></script> </body> </html>

接着是 index.js 文件，内容如下：

(function () {
    function init() {
        // $webViewBridge.registerHandler() 用于注册供脚本端调用的处理器
        // 第一个参数是处理器名称，第二个参数是处理器被调用时执行的函数
        $webViewBridge.registerHandler("functionForScriptToCall", function (data, responseCallback) {
            // data 是脚本端调用时传递的参数
            // responseCallback 用于向脚本端返回处理结果
            if (responseCallback) {
                var responseData = "I am from Javascript " + data
                responseCallback(responseData)
            }
        })
    }

    if (window.$webViewBridge) {
        init();
    } else {
        document.addEventListener(
            'WebViewBridgeReady',
            function () {
                // 在此处执行初始化操作
                init();
            },
            false
        );
    }
})()

document.getElementById("button").addEventListener("click", function (e) {
    // $webViewBridge.callHandler() 用于调用脚本端注册的处理器
    // 参数一：处理器名称；参数二：传递给处理器的参数；参数三：接收脚本端返回值的回调函数
    $webViewBridge.callHandler("handlerForWebView", "params from js", function (p) {
        alert(p)
    })
})

index.js 文件的功能也很简单。首先是下面这部分代码，可视为固定格式，主要用于网页端与脚本端的交互。你只需在 init 方法中定义供脚本端调用的处理器，或读取脚本端的配置信息。这些操作必须在 init 方法中调用，因为只有在该方法中 $webViewBridge 对象才会被初始化——这个对象是网页端与脚本端交互的关键。如果过早使用，该对象可能尚未创建完成，导致无法正常工作。

(function () {
    function init() {
        // $webViewBridge.registerHandler() 用于注册供脚本端调用的处理器
        // 第一个参数是处理器名称，第二个参数是处理器被调用时执行的函数
        $webViewBridge.registerHandler("functionForScriptToCall", function (data, responseCallback) {
            // data 是脚本端调用时传递的参数
            // responseCallback 用于向脚本端返回处理结果
            if (responseCallback) {
                var responseData = "I am from Javascript " + data
                responseCallback(responseData)
            }
        })
    // 你可以在此处添加更多处理器，或从脚本端读取配置信息
    }

    if (window.$webViewBridge) {
        init();
    } else {
        document.addEventListener(
            'WebViewBridgeReady',
            function () {
                // 在此处执行初始化操作
                init();
            },
            false
        );
    }
})()

剩下的这部分代码非常简单，仅为按钮添加点击事件。点击按钮时，会调用脚本端注册的处理器，并将脚本端返回的内容通过弹窗显示出来。

document.getElementById("button").addEventListener("click", function (e) {
// $webViewBridge.callHandler() 用于调用脚本端注册的处理器
// 参数一：处理器名称；参数二：传递给处理器的参数；参数三：接收脚本端返回值的回调函数
    $webViewBridge.callHandler("handlerForWebView", "params from js", function (p) {
        alert(p)
    })
})

需要注意网页端与脚本端交互的 API 函数：

$webViewBridge.registerHandler：在网页端注册处理器，注册后脚本端可调用该处理器
$webViewBridge.callHandler：用于调用脚本端注册的处理器

脚本端的代码也很简单，只需注册一个供网页端调用的处理器。在该处理器中，会调用网页端已注册的一个处理器，并对网页端传递的字符串参数进行内容扩展，然后将结果返回给网页端。

import com.m8test.script.GlobalVariables.*

// WebViewActivity.getBridge() 用于获取 WebViewBridge 对象
val bridge = _webView.getBridge()
// WebViewBridge.registerHandler() 用于注册处理器供 WebView 端调用
bridge.registerHandler("handlerForWebView") {
    // it -> String
    // it 表示从 WebView 端传来的参数,如果没有则为 null
    val handledParams = it + " return from script"
    // WebViewBridge.callHandler() 用于调用 WebView 端注册的处理器
    bridge.callHandler("functionForScriptToCall", handledParams) { i ->
        // it -> String
        // it 为 WebView 端js函数返回值
        _console.log(i)
    }
    handledParams
}
// Activity.start() 用于启动Android系统的Activity
_activity.start()

// WebViewActivity.getBridge() 用于获取 WebViewBridge 对象
def bridge = $webView.getBridge()
// WebViewBridge.registerHandler() 用于注册处理器供 WebView 端调用
bridge.registerHandler("handlerForWebView") {
    // it -> String
    // it 表示从 WebView 端传来的参数,如果没有则为 null
    def handledParams = "$it return from script"
    // WebViewBridge.callHandler() 用于调用 WebView 端注册的处理器
    bridge.callHandler("functionForScriptToCall", handledParams) {
        // it -> String
        // it 为 WebView 端js函数返回值
        $console.log(it)
    }
    handledParams.toString()
}
// Activity.start() 用于启动Android系统的Activity
$activity.start()

import com.m8test.script.core.api.ui.webview.WebViewBridge;
import kotlin.jvm.functions.Function1;

import static com.m8test.script.GlobalVariables.*;

// WebViewActivity.getBridge() 用于获取 WebViewBridge 对象
final WebViewBridge bridge = $webView.getBridge();
// WebViewBridge.registerHandler() 用于注册处理器供 WebView 端调用
bridge.registerHandler("handlerForWebView", new Function1() {
    @Override
    public Object invoke(Object s) {
        String it = s.toString();
        // it 表示从 WebView 端传来的参数,如果没有则为 null
        String handledParams = it + " return from script";
        // WebViewBridge.callHandler() 用于调用 WebView 端注册的处理器
        bridge.callHandler("functionForScriptToCall", handledParams, new Function1() {
            @Override
            public Object invoke(Object o) {
                String s = o.toString();
                // s 为 WebView 端js函数返回值
                $console.log(s);
                return null;
            }
        });
        return handledParams;
    }
});
// Activity.start() 用于启动Android系统的Activity
$activity.start();

// WebViewActivity.getBridge() 用于获取 WebViewBridge 对象
let bridge = $webView.getBridge()
// WebViewBridge.registerHandler() 用于注册处理器供 WebView 端调用
bridge.registerHandler("handlerForWebView", (it) => {
    // it -> String
    // it 表示从 WebView 端传来的参数,如果没有则为 null
    let handledParams = it + " return from script"
    // WebViewBridge.callHandler() 用于调用 WebView 端注册的处理器
    bridge.callHandler("functionForScriptToCall", handledParams, (it) => {
        // it -> String
        // it 为 WebView 端js函数返回值
        $console.log(it)
    })
    return handledParams
})
// Activity.start() 用于启动Android系统的Activity
$activity.start()

-- WebViewActivity.getBridge() 用于获取 WebViewBridge 对象
local bridge = _webView:getBridge()
-- WebViewBridge.registerHandler() 用于注册处理器供 WebView 端调用
bridge:registerHandler("handlerForWebView", function(it)
    -- it -> String
    -- it 表示从 WebView 端传来的参数,如果没有则为 nil
    local handledParams = it .. "return from script"
    -- WebViewBridge.callHandler() 用于调用 WebView 端注册的处理器
    bridge:callHandler("functionForScriptToCall", handledParams, function(i)
        -- it -> String
        -- it 为 WebView 端js函数返回值
        _console:log(i)
    end)
    return handledParams
end)
-- Activity.start() 用于启动Android系统的Activity
_activity:start()

<?php
// WebViewActivity.getBridge() 用于获取 WebViewBridge 对象
$bridge = $webView->getBridge();
// WebViewBridge.registerHandler() 用于注册处理器供 WebView 端调用
$bridge->registerHandler("handlerForWebView", function ($it) use ($console, $bridge) {
    // it -> String
    // it 表示从 WebView 端传来的参数,如果没有则为 nil
    $handledParams = $it . "return from script";
    // WebViewBridge.callHandler() 用于调用 WebView 端注册的处理器
    $bridge->callHandler("functionForScriptToCall", $handledParams, function ($i) use ($console) {
        // it -> String
        // it 为 WebView 端js函数返回值
        $console->log($i);
    });
    return $handledParams;
});
// Activity.start() 用于启动Android系统的Activity
$activity->start();

# from 引入时必须使用相对于src目录的路径
# 必须使用 `from m8test_java.com.m8test.script.GlobalVariables import xxx` xxx是全局变量名
from m8test_java.com.m8test.script.GlobalVariables import _activity
from m8test_java.com.m8test.script.GlobalVariables import _console
from m8test_java.com.m8test.script.GlobalVariables import _webView

# WebViewActivity.getBridge() 用于获取 WebViewBridge 对象
bridge = _webView.getBridge()


def fn1(it):
    # it -> String
    # it 表示从 WebView 端传来的参数,如果没有则为 null
    handledParams = it + " return from script"

    def fn2(i):
        # it -> String
        # it 为 WebView 端js函数返回值
        _console.log(i)

    # WebViewBridge.callHandler() 用于调用 WebView 端注册的处理器
    bridge.callHandler("functionForScriptToCall", handledParams, fn2)
    return handledParams


# WebViewBridge.registerHandler() 用于注册处理器供 WebView 端调用
bridge.registerHandler("handlerForWebView", fn1)
# Activity.start() 用于启动Android系统的Activity
_activity.start()

# WebViewActivity.getBridge() 用于获取 WebViewBridge 对象
bridge = $webView.getBridge()
# WebViewBridge.registerHandler() 用于注册处理器供 WebView 端调用
bridge.registerHandler("handlerForWebView") { |it|
  # it -> String
  # it 表示从 WebView 端传来的参数,如果没有则为 null
  handledParams = it + "return from script"
  # WebViewBridge.callHandler() 用于调用 WebView 端注册的处理器
  bridge.callHandler("functionForScriptToCall", handledParams) { |i|
    # it -> String
    # it 为 WebView 端js函数返回值
    $console.log(i)
  }
  handledParams
}
# Activity.start() 用于启动Android系统的Activity
$activity.start()

需要注意脚本端与网页端交互的 API 函数：

bridge.registerHandler ：用于在脚本端注册处理器，注册后网页端可调用该处理器
bridge.callHandler ：用于调用网页端已注册的处理器

Last modified: 01 October 2025