AIWROK软件原生Activity与H5页面交互实现及代码解析
<span style="font-family: "Microsoft Yahei", Hei, Tahoma, SimHei, sans-serif; font-size: 22px; font-weight: 700;">AIWROK软件原生Activity与H5页面交互实现及代码解析</span><p></p><div><span style="font-family: "Microsoft Yahei", Hei, Tahoma, SimHei, sans-serif; font-size: 22px; font-weight: 700;"><br></span></div><div><p id="uc236fe60" class="ne-p" style="min-height: 24px;"><span class="ne-text" data-spm-anchor-id="a21bo.29368746.0.i2.6c932707EvMvpX">原生activity和h5交互案例</span></p><p id="uc236fe60" class="ne-p" style="min-height: 24px;"><span class="ne-text"></span></p><br><p></p><article class="lake-columns" style="display: flex;"><article class="lake-column-item" style="flex: 0.5 1 0%;"><div id="NHqi3" class="ne-localdoc"></div><p id="u76cb37ed" class="ne-p" style="min-height: 24px;"><br></p></article><article class="lake-column-item" style="flex: 0.5 1 0%;"><p id="u05254d68" class="ne-p" style="min-height: 24px;"><br></p></article></article><pre data-language="javascript" id="jIFVu" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code><!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>
</code></pre><p id="u9a703b8f" class="ne-p" style="min-height: 24px;"><span class="ne-text">用于与原生Android应用进行交互。页面包含一些表单控件和按钮，用户可以通过这些按钮调用原生Android应用中的方法、执行JavaScript代码或传递表单控件的值。以下是代码的详细解释：</span></p><h3 id="a106143a" style="margin-top: 16px; margin-bottom: 5px; font-size: 1em; line-height: 28px;"><span class="ne-text">1. HTML结构</span></h3><ul class="ne-ul" style="margin-left: 14px; padding-left: 23px;"><li id="u9e7c018e" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text"><head></span></code><span class="ne-text">部分</span><span class="ne-text">：定义了页面的元数据，包括字符编码、视口设置、标题和样式。</span></li><li id="u69f57426" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text"><body></span></code><span class="ne-text">部分</span><span class="ne-text">：包含页面的主要内容，包括一个表单和多个按钮。</span></li></ul><h3 id="21596b80" style="margin-top: 16px; margin-bottom: 5px; font-size: 1em; line-height: 28px;"><span class="ne-text">2. 表单控件</span></h3><ul class="ne-ul" style="margin-left: 14px; padding-left: 23px;"><li id="u3cb53e7d" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><span class="ne-text">输入框</span><span class="ne-text">：</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text"><input type="text" id="input1" name="input1" value="我是输入框"></span></code><span class="ne-text">，用户可以在其中输入文本。</span></li><li id="ub25ff5f6" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><span class="ne-text">单选按钮</span><span class="ne-text">：</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text"><input type="radio" id="radio1" name="radiogroup" value="radio1"></span></code><span class="ne-text">，用户可以选择其中一个选项。</span></li><li id="ucbf4e636" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><span class="ne-text">多选框</span><span class="ne-text">：</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text"><input type="checkbox" id="check1" name="check1" value="check1"></span></code><span class="ne-text">，用户可以选择多个选项。</span></li><li id="ubaf74daa" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><span class="ne-text">下拉框：</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text"><select id="dropdown" name="dropdown"></span></code><span class="ne-text">，用户可以从下拉列表中选择一个选项。</span></li></ul><h3 id="94197df2" style="margin-top: 16px; margin-bottom: 5px; font-size: 1em; line-height: 28px;"><span class="ne-text">3. 按钮和交互</span></h3><ul class="ne-ul" style="margin-left: 14px; padding-left: 23px;"><li id="u099307b0" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><span class="ne-text">调用原生方法：</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text"><button type="submit" onClick="callHelloAI();">调用原生方法</button></span></code><span class="ne-text">，点击该按钮会调用</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">callHelloAI()</span></code><span class="ne-text">函数，该函数通过</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">window.at.callFun('main','hello')</span></code><span class="ne-text">调用原生Android应用中的方法。</span></li></ul><pre data-language="javascript" id="yiVsK" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code>function callHelloAI() {
window.at.callFun('main','hello');
}</code></pre><p id="u419f51c3" class="ne-p" style="min-height: 24px;"><br></p><ul class="ne-ul" style="margin-left: 14px; padding-left: 23px;"><li id="u9e905910" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><span class="ne-text">执行脚本代码：</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text"><button type="submit" onClick="runJS();">执行脚本代码</button></span></code><span class="ne-text">，点击该按钮会调用</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">runJS()</span></code><span class="ne-text">函数，该函数通过</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">window.at.runJs()</span></code><span class="ne-text">执行一段JavaScript代码。</span></li></ul><pre data-language="javascript" id="seRSZ" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code>function runJS(){
window.at.runJs(function (){
printl("你好");
auto.recents();
}.toString());
}</code></pre><p id="u996355da" class="ne-p" style="min-height: 24px;"><br></p><ul class="ne-ul" style="margin-left: 14px; padding-left: 23px;"><li id="u8ef515b0" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><span class="ne-text">执行脚本文件：</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text"><button type="submit" onClick="runJsFile();">执行脚本文件</button></span></code><span class="ne-text">，点击该按钮会调用</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">runJsFile()</span></code><span class="ne-text">函数，该函数通过</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">window.at.runJsFile()</span></code><span class="ne-text">执行一个外部的JavaScript文件。</span></li></ul><pre data-language="javascript" id="b3njr" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code>function runJsFile(){
window.at.runJsFile('主脚本.js');
}</code></pre><p id="ud8c5f8c7" class="ne-p" style="min-height: 24px;"><br></p><ul class="ne-ul" style="margin-left: 14px; padding-left: 23px;"><li id="ua290cf8f" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><span class="ne-text">传递控件值：</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text"><button type="submit" onClick="sendText();">传递控件值</button></span></code><span class="ne-text">，点击该按钮会调用</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">sendText()</span></code><span class="ne-text">函数，该函数获取输入框的值，并通过</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">window.at.runJsFile()</span></code><span class="ne-text">传递该值。</span></li></ul><pre data-language="javascript" id="yr8tw" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code>function sendText(){
var inputValue = document.getElementById('input1').value;
window.at.runJsFile('测试传值.js');
}</code></pre><h3 id="fd7eee64" style="margin-top: 16px; margin-bottom: 5px; font-size: 1em; line-height: 28px;"><span class="ne-text">4. JavaScript函数</span></h3><ul class="ne-ul" style="margin-left: 14px; padding-left: 23px;"><li id="ud0e5320d" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">callHelloAI()</span></code><span class="ne-text">：调用原生Android应用中的方法。</span></li><li id="uf08f4b40" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">runJS()</span></code><span class="ne-text">：执行一段JavaScript代码。</span></li><li id="u011a1aa8" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">runJsFile()</span></code><span class="ne-text">：执行一个外部的JavaScript文件。</span></li><li id="u7fa5d916" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">sendText()</span></code><span class="ne-text">：获取输入框的值并传递给原生应用。</span></li></ul><h3 id="e046cc60" style="margin-top: 16px; margin-bottom: 5px; font-size: 1em; line-height: 28px;"><span class="ne-text">5. 样式</span></h3><ul class="ne-ul" style="margin-left: 14px; padding-left: 23px;"><li id="u245bc2cf" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text"><style></span></code><span class="ne-text">标签</span><span class="ne-text">：定义了页面的样式，包括背景颜色、字体颜色、表单控件的样式等。</span></li></ul><h3 id="25f9c7fa" style="margin-top: 16px; margin-bottom: 5px; font-size: 1em; line-height: 28px;"><span class="ne-text">总结</span></h3><p id="uf7f609f3" class="ne-p" style="min-height: 24px;"><span class="ne-text">这段代码展示了一个HTML页面如何通过JavaScript与原生Android应用进行交互。用户可以通过点击按钮调用原生方法、执行JavaScript代码或传递表单控件的值。</span><code class="ne-code" style="font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">window.at</span></code><span class="ne-text">对象是原生Android应用暴露给WebView的接口，用于实现JavaScript与原生代码的交互。</span></p></div>
页:
[1]