AIWROK软件漂亮对接H5简单示例 - B2B网络软件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复杂H5与安卓原生交互演示</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
color: #fff;
line-height: 1.6;
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.7);
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #4CAF50;
}
h1 {
font-size: 2.5em;
margin-bottom: 10px;
color: #4CAF50;
text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}
.subtitle {
font-size: 1.2em;
opacity: 0.8;
}
.section {
background: rgba(50, 50, 50, 0.6);
border-radius: 10px;
padding: 20px;
margin-bottom: 25px;
border: 1px solid #444;
}
.section-title {
font-size: 1.5em;
margin-bottom: 15px;
color: #2196F3;
display: flex;
align-items: center;
}
.section-title::before {
content: "▶";
margin-right: 10px;
color: #4CAF50;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #FF9800;
}
input, select, textarea {
width: 100%;
padding: 12px;
border: none;
border-radius: 8px;
background: rgba(30, 30, 30, 0.8);
color: #fff;
font-size: 16px;
border: 1px solid #444;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: #2196F3;
box-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
}
.radio-group, .checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.radio-item, .checkbox-item {
display: flex;
align-items: center;
background: rgba(40, 40, 40, 0.7);
padding: 10px 15px;
border-radius: 8px;
}
.radio-item input, .checkbox-item input {
width: auto;
margin-right: 8px;
}
.button-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}
button {
padding: 14px 20px;
border: none;
border-radius: 8px;
background: linear-gradient(to right, #4CAF50, #2E7D32);
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
background: linear-gradient(to right, #45a049, #1B5E20);
}
button:active {
transform: translateY(1px);
}
.secondary {
background: linear-gradient(to right, #2196F3, #0D47A1);
}
.secondary:hover {
background: linear-gradient(to right, #1e88e5, #0b3d91);
}
.warning {
background: linear-gradient(to right, #FF9800, #E65100);
}
.warning:hover {
background: linear-gradient(to right, #F57C00, #BF360C);
}
.danger {
background: linear-gradient(to right, #F44336, #B71C1C);
}
.danger:hover {
background: linear-gradient(to right, #E53935, #B71C1C);
}
.result-container {
background: rgba(30, 30, 30, 0.8);
border-radius: 8px;
padding: 20px;
margin-top: 20px;
border: 1px solid #444;
max-height: 300px;
overflow-y: auto;
}
.result-title {
font-size: 1.2em;
margin-bottom: 10px;
color: #FF9800;
}
#result {
font-family: 'Courier New', monospace;
white-space: pre-wrap;
word-break: break-word;
color: #ddd;
}
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
background: #F44336;
margin-right: 10px;
}
.status-indicator.connected {
background: #4CAF50;
}
.tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 2px solid #444;
}
.tab {
padding: 12px 20px;
cursor: pointer;
background: rgba(50, 50, 50, 0.6);
border: 1px solid #444;
border-bottom: none;
border-radius: 8px 8px 0 0;
margin-right: 5px;
}
.tab.active {
background: rgba(30, 30, 30, 0.8);
color: #4CAF50;
font-weight: bold;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.progress-bar {
height: 10px;
background: rgba(50, 50, 50, 0.6);
border-radius: 5px;
margin: 20px 0;
overflow: hidden;
}
.progress {
height: 100%;
background: linear-gradient(to right, #4CAF50, #2196F3);
width: 0%;
transition: width 0.5s ease;
}
footer {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #444;
color: #aaa;
font-size: 0.9em;
}
@media (max-width: 600px) {
.container {
padding: 15px;
}
.button-group {
grid-template-columns: 1fr;
}
h1 {
font-size: 2em;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>复杂H5与安卓原生交互演示</h1>
<p class="subtitle">展示高级功能和复杂数据交互</p>
<div>
<span class="status-indicator" id="connectionStatus"></span>
<span id="connectionText">连接状态: 未连接</span>
</div>
</header>
<div class="tabs">
<div class="tab active" onclick="switchTab('tab1')">数据交互</div>
<div class="tab" onclick="switchTab('tab2')">系统功能</div>
<div class="tab" onclick="switchTab('tab3')">配置管理</div>
<div class="tab" onclick="switchTab('tab4')">设备信息</div>
</div>
<div id="tab1" class="tab-content active">
<div class="section">
<h2 class="section-title">复杂表单数据</h2>
<div class="form-group">
<label for="userName">用户姓名</label>
<input type="text" id="userName" placeholder="请输入您的姓名">
</div>
<div class="form-group">
<label for="userEmail">邮箱地址</label>
<input type="email" id="userEmail" placeholder="请输入您的邮箱">
</div>
<div class="form-group">
<label for="userAge">年龄</label>
<input type="number" id="userAge" min="1" max="120" placeholder="请输入您的年龄">
</div>
<div class="form-group">
<label>性别</label>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
</div>
<div class="radio-item">
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
</div>
<div class="radio-item">
<input type="radio" id="other" name="gender" value="other">
<label for="other">其他</label>
</div>
</div>
</div>
<div class="form-group">
<label>兴趣爱好</label>
<div class="checkbox-group">
<div class="checkbox-item">
<input type="checkbox" id="reading" name="interests" value="reading">
<label for="reading">阅读</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">音乐</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">运动</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="travel" name="interests" value="travel">
<label for="travel">旅行</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="technology" name="interests" value="technology">
<label for="technology">科技</label>
</div>
</div>
</div>
<div class="form-group">
<label for="userBio">个人简介</label>
<textarea id="userBio" rows="4" placeholder="请简单介绍一下自己..."></textarea>
</div>
<div class="form-group">
<label for="favColor">喜欢的颜色</label>
<select id="favColor">
<option value="">请选择</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="yellow">黄色</option>
<option value="purple">紫色</option>
<option value="orange">橙色</option>
</select>
</div>
</div>
<div class="section">
<h2 class="section-title">数据操作</h2>
<div class="button-group">
<button onclick="sendComplexData()">发送复杂数据</button>
<button class="secondary" onclick="sendBatchData()">批量数据传输</button>
<button class="warning" onclick="clearForm()">清空表单</button>
<button class="danger" onclick="resetDemo()">重置演示</button>
</div>
</div>
</div>
<div id="tab2" class="tab-content">
<div class="section">
<h2 class="section-title">系统功能调用</h2>
<div class="button-group">
<button onclick="goHome()">返回桌面</button>
<button onclick="showRecents()">显示最近任务</button>
<button onclick="takeScreenshot()">截屏</button>
<button onclick="toggleFlashlight()">开关手电筒</button>
<button onclick="vibrate()">震动</button>
<button onclick="playNotificationSound()">播放提示音</button>
</div>
</div>
<div class="section">
<h2 class="section-title">应用管理</h2>
<div class="button-group">
<button onclick="openApp('com.android.settings')">打开设置</button>
<button onclick="openApp('com.android.chrome')">打开Chrome</button>
<button onclick="openApp('com.android.camera2')">打开相机</button>
<button onclick="listInstalledApps()">列出已安装应用</button>
</div>
</div>
</div>
<div id="tab3" class="tab-content">
<div class="section">
<h2 class="section-title">配置管理</h2>
<div class="form-group">
<label for="configKey">配置键名</label>
<input type="text" id="configKey" placeholder="例如: user_preference">
</div>
<div class="form-group">
<label for="configValue">配置值</label>
<input type="text" id="configValue" placeholder="配置值">
</div>
<div class="form-group">
<label for="configPath">配置文件路径</label>
<input type="text" id="configPath" value="/sdcard/aiwork/config.txt">
</div>
<div class="button-group">
<button onclick="saveConfig()">保存配置</button>
<button class="secondary" onclick="loadConfig()">读取配置</button>
<button class="warning" onclick="deleteConfig()">删除配置</button>
</div>
</div>
<div class="section">
<h2 class="section-title">公共变量</h2>
<div class="form-group">
<label for="publicVarKey">变量名</label>
<input type="text" id="publicVarKey" placeholder="例如: shared_data">
</div>
<div class="form-group">
<label for="publicVarValue">变量值</label>
<input type="text" id="publicVarValue" placeholder="变量值">
</div>
<div class="button-group">
<button onclick="setPublicVar()">设置变量</button>
<button class="secondary" onclick="getPublicVar()">获取变量</button>
</div>
</div>
</div>
<div id="tab4" class="tab-content">
<div class="section">
<h2 class="section-title">设备信息</h2>
<div class="button-group">
<button onclick="getDeviceInfo()">获取设备信息</button>
<button onclick="getStorageInfo()">获取存储信息</button>
<button onclick="getNetworkInfo()">获取网络信息</button>
<button onclick="getBatteryInfo()">获取电池信息</button>
</div>
</div>
<div class="section">
<h2 class="section-title">系统操作</h2>
<div class="button-group">
<button onclick="showToast('这是一条Toast消息')">显示Toast</button>
<button onclick="showNotification()">显示通知</button>
<button onclick="setClipboardText()">设置剪贴板</button>
<button onclick="getClipboardText()">获取剪贴板</button>
</div>
</div>
</div>
<div class="progress-bar">
<div class="progress" id="progressBar"></div>
</div>
<div class="section">
<h2 class="section-title">交互结果</h2>
<div class="result-container">
<div class="result-title">操作日志:</div>
<div id="result">等待操作...</div>
</div>
</div>
<footer>
<p>复杂H5与安卓原生交互演示 v2.0</p>
<p>适用于AIWROK自动化平台 | Rhino JavaScript引擎</p>
</footer>
</div>
<script>
// 显示结果
function showResult(message) {
var resultElement = document.getElementById('result');
var timestamp = new Date().toLocaleString();
resultElement.innerHTML += '[' + timestamp + '] ' + message + '\n';
resultElement.scrollTop = resultElement.scrollHeight;
}
// 显示进度
function showProgress(percent) {
document.getElementById('progressBar').style.width = percent + '%';
}
// 切换标签页
function switchTab(tabId) {
// 隐藏所有标签内容
var tabContents = document.getElementsByClassName('tab-content');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].classList.remove('active');
}
// 移除所有标签的活动状态
var tabs = document.getElementsByClassName('tab');
for (var i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active');
}
// 显示选中的标签内容
document.getElementById(tabId).classList.add('active');
// 设置选中标签为活动状态
event.target.classList.add('active');
}
// 连接状态更新
function updateConnectionStatus(connected) {
var indicator = document.getElementById('connectionStatus');
var text = document.getElementById('connectionText');
if (connected) {
indicator.classList.add('connected');
text.textContent = '连接状态: 已连接';
} else {
indicator.classList.remove('connected');
text.textContent = '连接状态: 未连接';
}
}
// 发送复杂数据
function sendComplexData() {
try {
showResult('正在收集表单数据...');
showProgress(30);
// 收集表单数据
var formData = {
userName: document.getElementById('userName').value,
userEmail: document.getElementById('userEmail').value,
userAge: document.getElementById('userAge').value,
gender: document.querySelector('input[name="gender"]:checked')?.value || '',
interests: [],
userBio: document.getElementById('userBio').value,
favColor: document.getElementById('favColor').value,
timestamp: new Date().toISOString()
};
// 收集复选框数据
var interestCheckboxes = document.querySelectorAll('input[name="interests"]:checked');
for (var i = 0; i < interestCheckboxes.length; i++) {
formData.interests.push(interestCheckboxes[i].value);
}
showResult('数据收集完成，正在发送到APP...');
showProgress(60);
// 发送到APP
window.at.callFunction('processUserData', JSON.stringify(formData));
showResult('复杂数据已发送到APP: ' + JSON.stringify(formData, null, 2));
showProgress(100);
// 2秒后重置进度条
setTimeout(function() {
showProgress(0);
}, 2000);
} catch (e) {
showResult('发送数据出错: ' + e);
showProgress(0);
}
}
// 批量数据传输
function sendBatchData() {
try {
showResult('开始批量数据传输...');
showProgress(10);
// 生成批量数据
var batchData = [];
for (var i = 0; i < 10; i++) {
batchData.push({
id: i + 1,
name: '项目 ' + (i + 1),
value: Math.random() * 100,
timestamp: new Date(Date.now() - Math.random() * 10000000).toISOString()
});
// 更新进度
showProgress(10 + i * 9);
}
showResult('批量数据生成完成，正在发送...');
showProgress(90);
// 发送到APP
window.at.callFunction('processBatchData', JSON.stringify(batchData));
showResult('批量数据传输完成，共发送 ' + batchData.length + ' 条记录');
showProgress(100);
// 2秒后重置进度条
setTimeout(function() {
showProgress(0);
}, 2000);
} catch (e) {
showResult('批量数据传输出错: ' + e);
showProgress(0);
}
}
// 清空表单
function clearForm() {
document.getElementById('userName').value = '';
document.getElementById('userEmail').value = '';
document.getElementById('userAge').value = '';
document.getElementById('userBio').value = '';
document.getElementById('favColor').selectedIndex = 0;
// 清空单选按钮
var radios = document.querySelectorAll('input[name="gender"]');
for (var i = 0; i < radios.length; i++) {
radios[i].checked = false;
}
// 清空复选框
var checkboxes = document.querySelectorAll('input[name="interests"]');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
}
showResult('表单已清空');
}
// 重置演示
function resetDemo() {
clearForm();
document.getElementById('result').innerHTML = '演示已重置\n';
showResult('演示已重置');
}
// 系统功能调用
function goHome() {
try {
window.at.runJs(function() {
printl('H5请求返回桌面');
auto.home();
}.toString());
showResult('已请求返回桌面');
} catch (e) {
showResult('返回桌面失败: ' + e);
}
}
function showRecents() {
try {
window.at.runJs(function() {
printl('H5请求显示最近任务');
auto.recents();
}.toString());
showResult('已请求显示最近任务');
} catch (e) {
showResult('显示最近任务失败: ' + e);
}
}
function takeScreenshot() {
try {
window.at.runJs(function() {
printl('H5请求截屏');
// 这里可以调用具体的截屏方法
}.toString());
showResult('截屏请求已发送');
} catch (e) {
showResult('截屏请求失败: ' + e);
}
}
function toggleFlashlight() {
try {
window.at.runJs(function() {
printl('H5请求开关手电筒');
// 这里可以调用具体的手电筒控制方法
}.toString());
showResult('手电筒控制请求已发送');
} catch (e) {
showResult('手电筒控制失败: ' + e);
}
}
function vibrate() {
try {
window.at.runJs(function() {
printl('H5请求震动');
// 这里可以调用具体的震动方法
}.toString());
showResult('震动请求已发送');
} catch (e) {
showResult('震动请求失败: ' + e);
}
}
function playNotificationSound() {
try {
window.at.runJs(function() {
printl('H5请求播放提示音');
// 这里可以调用具体的播放声音方法
}.toString());
showResult('播放提示音请求已发送');
} catch (e) {
showResult('播放提示音失败: ' + e);
}
}
// 应用管理
function openApp(packageName) {
try {
window.at.runJs(function(pkg) {
printl('H5请求打开应用: ' + pkg);
// 这里可以调用具体的应用启动方法
}.toString(), packageName);
showResult('打开应用请求已发送: ' + packageName);
} catch (e) {
showResult('打开应用失败: ' + e);
}
}
function listInstalledApps() {
try {
window.at.runJs(function() {
printl('H5请求列出已安装应用');
// 这里可以调用具体的获取应用列表方法
}.toString());
showResult('列出应用请求已发送');
} catch (e) {
showResult('列出应用失败: ' + e);
}
}
// 配置管理
function saveConfig() {
try {
var key = document.getElementById('configKey').value;
var value = document.getElementById('configValue').value;
var path = document.getElementById('configPath').value;
if (!key || !value || !path) {
showResult('请填写完整的配置信息');
return;
}
window.at.setConfig(path, key, value);
showResult('配置已保存: ' + key + ' = ' + value);
} catch (e) {
showResult('保存配置失败: ' + e);
}
}
function loadConfig() {
try {
var key = document.getElementById('configKey').value;
var path = document.getElementById('configPath').value;
var defaultValue = '[无默认值]';
if (!key || !path) {
showResult('请填写配置键名和路径');
return;
}
var value = window.at.getConfig(path, key, defaultValue);
document.getElementById('configValue').value = value;
showResult('读取配置: ' + key + ' = ' + value);
} catch (e) {
showResult('读取配置失败: ' + e);
}
}
function deleteConfig() {
try {
var key = document.getElementById('configKey').value;
var path = document.getElementById('configPath').value;
if (!key || !path) {
showResult('请填写配置键名和路径');
return;
}
window.at.setConfig(path, key, ''); // 空值表示删除
document.getElementById('configValue').value = '';
showResult('配置已删除: ' + key);
} catch (e) {
showResult('删除配置失败: ' + e);
}
}
// 公共变量
function setPublicVar() {
try {
var key = document.getElementById('publicVarKey').value;
var value = document.getElementById('publicVarValue').value;
if (!key || !value) {
showResult('请填写完整的变量信息');
return;
}
window.at.publicSet(key, value);
showResult('公共变量已设置: ' + key + ' = ' + value);
} catch (e) {
showResult('设置公共变量失败: ' + e);
}
}
function getPublicVar() {
try {
var key = document.getElementById('publicVarKey').value;
if (!key) {
showResult('请填写变量名');
return;
}
var value = window.at.publicGet(key);
document.getElementById('publicVarValue').value = value;
showResult('获取公共变量: ' + key + ' = ' + value);
} catch (e) {
showResult('获取公共变量失败: ' + e);
}
}
// 设备信息
function getDeviceInfo() {
try {
showResult('正在获取设备信息...');
window.at.runJs(function() {
printl('H5请求获取设备信息');
// 这里可以调用具体的设备信息获取方法
}.toString());
// 获取基本信息
var rootPath = window.at.getRootPath();
var resPath = window.at.getResourcesPath();
showResult('设备基本信息:\n' +
'项目根目录: ' + rootPath + '\n' +
'资源目录: ' + resPath);
} catch (e) {
showResult('获取设备信息失败: ' + e);
}
}
function getStorageInfo() {
try {
showResult('正在获取存储信息...');
window.at.runJs(function() {
printl('H5请求获取存储信息');
// 这里可以调用具体的存储信息获取方法
}.toString());
showResult('存储信息请求已发送');
} catch (e) {
showResult('获取存储信息失败: ' + e);
}
}
function getNetworkInfo() {
try {
showResult('正在获取网络信息...');
window.at.runJs(function() {
printl('H5请求获取网络信息');
// 这里可以调用具体的网络信息获取方法
}.toString());
showResult('网络信息请求已发送');
} catch (e) {
showResult('获取网络信息失败: ' + e);
}
}
function getBatteryInfo() {
try {
showResult('正在获取电池信息...');
window.at.runJs(function() {
printl('H5请求获取电池信息');
// 这里可以调用具体的电池信息获取方法
}.toString());
showResult('电池信息请求已发送');
} catch (e) {
showResult('获取电池信息失败: ' + e);
}
}
// 系统操作
function showToast(message) {
try {
window.at.runJs(function(msg) {
printl('H5请求显示Toast: ' + msg);
// 这里可以调用具体的Toast显示方法
}.toString(), message);
showResult('Toast请求已发送: ' + message);
} catch (e) {
showResult('显示Toast失败: ' + e);
}
}
function showNotification() {
try {
window.at.runJs(function() {
printl('H5请求显示通知');
// 这里可以调用具体的通知显示方法
}.toString());
showResult('显示通知请求已发送');
} catch (e) {
showResult('显示通知失败: ' + e);
}
}
function setClipboardText() {
try {
var text = prompt('请输入要复制到剪贴板的文本:');
if (text !== null) {
window.at.runJs(function(txt) {
printl('H5请求设置剪贴板: ' + txt);
// 这里可以调用具体的剪贴板设置方法
}.toString(), text);
showResult('设置剪贴板请求已发送');
}
} catch (e) {
showResult('设置剪贴板失败: ' + e);
}
}
function getClipboardText() {
try {
window.at.runJs(function() {
printl('H5请求获取剪贴板内容');
// 这里可以调用具体的剪贴板获取方法
}.toString());
showResult('获取剪贴板内容请求已发送');
} catch (e) {
showResult('获取剪贴板内容失败: ' + e);
}
}
// 页面加载完成
window.onload = function() {
showResult('复杂H5页面加载完成');
updateConnectionStatus(true);
// 设置一些默认值用于演示
document.getElementById('userName').value = '张三';
document.getElementById('userEmail').value = 'zhangsan@example.com';
document.getElementById('userAge').value = '25';
document.getElementById('male').checked = true;
document.getElementById('reading').checked = true;
document.getElementById('music').checked = true;
document.getElementById('userBio').value = '我是一个热爱技术的开发者，喜欢探索新的技术领域。';
};
</script>
</body>
</html>

复制代码