B2B网络软件

标题: AIWROK软件原生Activity与H5页面交互实现及代码解析 [打印本页]

作者: YYPOST群发软件 时间: 9 小时前
标题: AIWROK软件原生Activity与H5页面交互实现及代码解析
AIWROK软件原生Activity与H5页面交互实现及代码解析

原生activity和h5交互案例

AIWROK软件原生Activity与H5页面交互实现及代码解析 B2B网络软件

原生activity和h5交互案例.rar (2.93 KB, 下载次数: 1)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>演示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color: #222;
            color: #fff;
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        input,
        select,
        button {
            color: #fff;
            background-color: #333;
            border: none;
            border-radius: 5px;
            padding: 10px;
            margin-right: 10px;
            box-sizing: border-box;
        }

        button {
            background-color: #4CAF50;
            width: 60%;
            font-size: 20px;
            cursor: pointer;
            margin-top: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
    <h1>欢迎来到深色漂亮页面</h1>
    <form>
        <div class="form-group">
            <label for="input1">输入框1：</label>
            <input type="text" id="input1" name="input1" value="我是输入框">
        </div>

        <div class="form-group">
            <label>单选按钮：</label>
            <input type="radio" id="radio1" name="radiogroup" value="radio1">
            <label for="radio1">选项1</label>
            <input type="radio" id="radio2" name="radiogroup" value="radio2">
            <label for="radio2">选项2</label>
        </div>

        <div class="form-group">
            <label>多选框：</label>
            <input type="checkbox" id="check1" name="check1" value="check1">
            <label for="check1">选项1</label>
            <input type="checkbox" id="check2" name="check2" value="check2">
            <label for="check2">选项2</label>
        </div>

        <div class="form-group">
            <label for="dropdown">下拉框：</label>
            <select id="dropdown" name="dropdown">
                <option value="option1">选项1</option>
                <option value="option2">选项2</option>
                <option value="option3">选项3</option>
            </select>
        </div>

        <button type="submit" onClick="callHelloAI();">调用原生方法</button>
        
        <button type="submit" onClick="runJS();">执行脚本代码</button>
        
        <button type="submit" onClick="runJsFile();">执行脚本文件</button>
        
        
        <button type="submit" onClick="sendText();">传递控件值</button>
    </form>

    <script language="JavaScript">
        //调用原生的方法,这里注意只能传一个参数如果传多参数可以整理成字符串json格式传输
        function callHelloAI() {
            window.at.callFun('main','hello');
        }
        
        
        
        //直接执行aiworkJs代码
        function runJS(){
           
           window.at.runJs(function (){
           
                //这里写js代码
                printl("你好");
                //打开后台
                auto.recents();
                
           }.toString());
        
        }
        
        
        //执行js脚本
        function runJsFile(){
        
           window.at.runJsFile('主脚本.js');
        }
        
        //传递控件值
        function sendText(){
        
           var inputValue = document.getElementById('input1').value;
           window.at.runJsFile('测试传值.js');
        }
        
        
        
        
    </script>

</body>

</html>

用于与原生Android应用进行交互。页面包含一些表单控件和按钮，用户可以通过这些按钮调用原生Android应用中的方法、执行JavaScript代码或传递表单控件的值。以下是代码的详细解释：

1. HTML结构

<head>部分：定义了页面的元数据，包括字符编码、视口设置、标题和样式。
<body>部分：包含页面的主要内容，包括一个表单和多个按钮。

2. 表单控件

输入框：<input type="text" id="input1" name="input1" value="我是输入框">，用户可以在其中输入文本。
单选按钮：<input type="radio" id="radio1" name="radiogroup" value="radio1">，用户可以选择其中一个选项。
多选框：<input type="checkbox" id="check1" name="check1" value="check1">，用户可以选择多个选项。
下拉框：<select id="dropdown" name="dropdown">，用户可以从下拉列表中选择一个选项。

3. 按钮和交互

调用原生方法：<button type="submit" onClick="callHelloAI();">调用原生方法</button>，点击该按钮会调用callHelloAI()函数，该函数通过window.at.callFun('main','hello')调用原生Android应用中的方法。

function callHelloAI() {
    window.at.callFun('main','hello');
}

执行脚本代码：<button type="submit" onClick="runJS();">执行脚本代码</button>，点击该按钮会调用runJS()函数，该函数通过window.at.runJs()执行一段JavaScript代码。

function runJS(){
    window.at.runJs(function (){
        printl("你好");
        auto.recents();
    }.toString());
}

执行脚本文件：<button type="submit" onClick="runJsFile();">执行脚本文件</button>，点击该按钮会调用runJsFile()函数，该函数通过window.at.runJsFile()执行一个外部的JavaScript文件。

function runJsFile(){
    window.at.runJsFile('主脚本.js');
}

传递控件值：<button type="submit" onClick="sendText();">传递控件值</button>，点击该按钮会调用sendText()函数，该函数获取输入框的值，并通过window.at.runJsFile()传递该值。

function sendText(){
    var inputValue = document.getElementById('input1').value;
    window.at.runJsFile('测试传值.js');
}

4. JavaScript函数

callHelloAI()：调用原生Android应用中的方法。
runJS()：执行一段JavaScript代码。
runJsFile()：执行一个外部的JavaScript文件。
sendText()：获取输入框的值并传递给原生应用。

5. 样式

<style>标签：定义了页面的样式，包括背景颜色、字体颜色、表单控件的样式等。

总结

这段代码展示了一个HTML页面如何通过JavaScript与原生Android应用进行交互。用户可以通过点击按钮调用原生方法、执行JavaScript代码或传递表单控件的值。window.at对象是原生Android应用暴露给WebView的接口，用于实现JavaScript与原生代码的交互。

欢迎光临 B2B网络软件 (http://bbs.niubt.cn/)