原生activity和h5交互案例
<!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与原生代码的交互。
原生activity和h5交互案例.rar
(2.93 KB, 下载次数: 47)
收藏
