AIWROK软件漂亮对接H5简单示例

发帖软件 · 发表于 7 小时前


	AIWROK软件漂亮对接H5简单示例 H53.png (410.29 KB, 下载次数: 0) 7 小时前上传 1.png (861.85 KB, 下载次数: 0) 7 小时前上传 2.png (907.1 KB, 下载次数: 0) 7 小时前上传 3.png (924.42 KB, 下载次数: 0) 7 小时前上传这个保存为：start.js Import("主脚本.js"); //初始化一个activity页面 //🍎交流QQ群711841924群一，苹果内测群，528816639 var ac = new activity(); ac.loadXML(` <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <WebView android:id="@+id/web" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout> `); sleep.millisecond(400); // 获取WebView组件 var web1 = ac.findWebViewById('web'); // 加载本地HTML文件（使用绝对路径） web1.url('/代码/h5.html'); 复制代码这个保存为 h5.html <!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> 复制代码

[24小时收录超级好的网站] AIWROK软件漂亮对接H5简单示例

相关帖子