AIWROK软件start.js简单H5直接调用

信息发布软件 · 发表于 5 小时前


	3.png (946.38 KB, 下载次数: 0) 5 小时前上传 4.png (951.35 KB, 下载次数: 0) 5 小时前上传 printl('//🍎交流QQ群711841924'); // 创建一个黄色主题风格的 WebView 示例 function createYellowThemedWebViewExample() { // 创建 WebView 实例 var web = new WebView(); // 显示界面 web.show(); // 加载黄色主题风格的 HTML 内容 web.loadHtml(` <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自适应TabView</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f0f0f5; color: #333; } .container { max-width: 600px; margin: 0 auto; background-color: #fff; min-height: 100vh; } /* Tab样式 / .tab-header { display: flex; background-color: #ff3b30; position: sticky; top: 0; z-index: 100; padding-top: 20px; } .tab-item { flex: 1; text-align: center; padding: 12px 0; color: #fff; font-size: 16px; cursor: pointer; position: relative; transition: all 0.3s ease; } .tab-item.active { font-weight: bold; } .tab-item.active::after { content: ''; position: absolute; bottom: 0; left: 25%; width: 50%; height: 3px; background-color: #fff; border-radius: 3px; } / 内容区域样式 / .tab-content { display: none; padding: 16px; } .tab-content.active { display: block; } / 标题样式 / .title-header { text-align: center; margin-bottom: 16px; } .title-label { font-size: 22px; color: #4682b4; font-weight: bold; } / 分隔线 / .divider { height: 1px; background-color: #e8e8e8; margin: 16px 0; } / 按钮容器 / .button-container { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 30px; width: 100%; } .button { padding: 20px 48px; border: none; border-radius: 12px; color: white; font-size: 24px; cursor: pointer; width: 100%; max-width: 300px; height: 80px; font-weight: bold; } .button.start { background-color: #4682b4; } .button.back { background-color: #ff6347; } / 内容标题 / .content-title { font-size: 18px; color: #800080; margin-bottom: 12px; font-weight: bold; } / 任务分类 / .category-label { font-size: 18px; color: #800080; margin-top: 16px; margin-bottom: 8px; font-weight: bold; } / 任务项 / .task-container { background-color: #fff; padding: 12px 0; display: flex; align-items: center; border-bottom: 1px solid #f0f0f0; } .task-checkbox { display: flex; align-items: center; width: 200px; } .task-checkbox input[type="checkbox"] { width: 20px; height: 20px; margin-right: 10px; } .task-checkbox label { font-size: 16px; cursor: pointer; } / 设置项 / .settings-container { background-color: #fff; border-radius: 8px; overflow: hidden; } </style> </head> <body> <div class="container"> <!-- Tab头部 --> <div class="tab-header"> <div class="tab-item active" data-tab="0">软件</div> <div class="tab-item" data-tab="1">通用</div> <div class="tab-item" data-tab="2">日常</div> <div class="tab-item" data-tab="3">辅助</div> <div class="tab-item" data-tab="4">设置</div> </div> <!-- 软件Tab内容 --> <div class="tab-content active" id="tab-0"> <div class="title-header"> <div class="title-label">软件功能</div> </div> <div class="divider"></div> <div class="button-container"> <button class="button start">开始</button> <button class="button back">返回</button> </div> <div class="content-title">软件页面内容</div> <div class="category-label">喜番任务</div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-0-0"> <label for="task-0-0">看短剧</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-0-1"> <label for="task-0-1">宝箱</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-0-2"> <label for="task-0-2">看视频</label> </div> </div> <div class="divider"></div> <div class="category-label">抖极任务</div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-1-0"> <label for="task-1-0">宝箱</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-1-1"> <label for="task-1-1">AD广</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-1-2"> <label for="task-1-2">小猪</label> </div> </div> <div class="divider"></div> <div class="category-label">红果任务</div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-2-0"> <label for="task-2-0">宝箱</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-2-1"> <label for="task-2-1">短剧</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-2-2"> <label for="task-2-2">海量</label> </div> </div> </div> <!-- 通用Tab内容 --> <div class="tab-content" id="tab-1"> <div class="title-header"> <div class="title-label">通用功能</div> </div> <div class="divider"></div> <div class="button-container"> <button class="button start">开始</button> <button class="button back">返回</button> </div> <div class="content-title">通用页面内容</div> <div class="category-label">通用任务</div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-3-0"> <label for="task-3-0">每日签到</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-3-1"> <label for="task-3-1">邀请好友</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-3-2"> <label for="task-3-2">分享内容</label> </div> </div> </div> <!-- 日常Tab内容 --> <div class="tab-content" id="tab-2"> <div class="title-header"> <div class="title-label">日常功能</div> </div> <div class="divider"></div> <div class="button-container"> <button class="button start">开始</button> <button class="button back">返回</button> </div> <div class="content-title">日常页面内容</div> <div class="category-label">日常任务</div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-4-0"> <label for="task-4-0">浏览资讯</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-4-1"> <label for="task-4-1">观看视频</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-4-2"> <label for="task-4-2">评论互动</label> </div> </div> </div> <!-- 辅助Tab内容 --> <div class="tab-content" id="tab-3"> <div class="title-header"> <div class="title-label">辅助功能</div> </div> <div class="divider"></div> <div class="button-container"> <button class="button start">开始</button> <button class="button back">返回</button> </div> <div class="content-title">辅助页面内容</div> <div class="category-label">辅助功能</div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-5-0"> <label for="task-5-0">设置</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-5-1"> <label for="task-5-1">帮助</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="task-5-2"> <label for="task-5-2">关于我们</label> </div> </div> </div> <!-- 设置Tab内容 --> <div class="tab-content" id="tab-4"> <div class="title-header"> <div class="title-label">设置功能</div> </div> <div class="divider"></div> <div class="button-container"> <button class="button start">开始</button> <button class="button back">返回</button> </div> <div class="content-title">设置选项</div> <div class="settings-container"> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="settings-0"> <label for="settings-0">通用设置</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="settings-1"> <label for="settings-1">个性化</label> </div> </div> <div class="task-container"> <div class="task-checkbox"> <input type="checkbox" id="settings-2"> <label for="settings-2">关于我们</label> </div> </div> </div> </div> </div> <script> // 模拟原生环境的交互方法 // 在实际环境中，这些方法由原生应用提供 if (typeof setConfig === 'undefined') { function setConfig(key, value) { console.log('设置配置:', key, '=', value); try { // 尝试使用localStorage localStorage.setItem(key, value); console.log('localStorage设置成功:', key, '=', value); // 优化提示内容 if (key && key.startsWith('last_')) { showToast('操作已记录'); } else { showToast('配置已设置'); } } catch (e) { console.warn('localStorage不可用，使用内存存储替代:', e.message); // 使用内存对象存储作为降级方案 if (!window._memoryStorage) { window._memoryStorage = {}; } window._memoryStorage[key] = value; // 只显示操作名称，避免显示完整时间戳 if (key && key.startsWith('last_')) { showToast('操作已记录'); } else { showToast('配置已记录'); } } } } if (typeof getConfig === 'undefined') { function getConfig(key, callback) { var value = '未设置'; try { // 优先尝试localStorage value = localStorage.getItem(key) \|\| '未设置'; console.log('从localStorage获取配置:', { key: key, value: value }); } catch (e) { // 降级到内存存储 console.warn('localStorage不可用，尝试从内存获取:', e.message); if (window._memoryStorage && window._memoryStorage[key] !== undefined) { value = window._memoryStorage[key]; } } if (typeof callback === 'function') { callback(value); } } } if (typeof toast === 'undefined') { function toast(message) { console.log('显示提示:', message); showToast(message); } } if (typeof runJS === 'undefined') { function runJS(func) { console.log('运行JS代码'); try { func(); showToast('JS代码执行成功'); } catch (e) { showToast('JS代码执行失败: ' + e.message); } } } if (typeof printl === 'undefined') { function printl(message) { console.log('原生日志:', message); } } if (typeof dismiss === 'undefined') { function dismiss() { console.log('关闭界面'); showToast('关闭界面操作'); } } if (typeof runFile === 'undefined') { function runFile(filePath) { console.log('运行脚本文件:', filePath); showToast('运行脚本文件: ' + filePath); } } // 保存用户操作到配置 function saveUserAction(action, value) { var timestamp = new Date().toISOString(); console.log('保存用户操作:', action, '时间戳:', timestamp); setConfig('last_' + action, timestamp); if (value) { console.log('保存操作值:', action, '=', value); // 优化提示内容，只显示操作名和简短信息 setConfig(action, value); } } // 自定义Toast提示 - 优化版本 function showToast(message) { // 创建toast元素 var toast = document.getElementById('custom-toast'); if (!toast) { toast = document.createElement('div'); toast.id = 'custom-toast'; toast.style.cssText = 'position: fixed;' + 'top: 50%;' + 'left: 50%;' + 'transform: translate(-50%, -50%);' + 'background: rgba(0, 0, 0, 0.7);' + 'color: white;' + 'padding: 12px 24px;' + 'border-radius: 8px;' + 'font-size: 14px;' + 'z-index: 9999;' + 'opacity: 0;' + 'transition: opacity 0.3s ease, transform 0.3s ease;' + 'transform: translate(-50%, -50%) scale(0.9);'; document.body.appendChild(toast); } // 清除之前的定时器 if (toast.timer) { clearTimeout(toast.timer); } // 设置消息并显示（带动画效果） toast.textContent = message; toast.style.opacity = '1'; toast.style.transform = 'translate(-50%, -50%) scale(1)'; // 2秒后隐藏 toast.timer = setTimeout(function() { toast.style.opacity = '0'; toast.style.transform = 'translate(-50%, -50%) scale(0.9)'; }, 2000); } // 添加按钮点击反馈 function addButtonFeedback() { var buttons = document.querySelectorAll('.button'); for (var i = 0; i < buttons.length; i++) { (function(button) { button.addEventListener('mousedown', function() { this.style.transform = 'scale(0.95)'; }); button.addEventListener('mouseup', function() { this.style.transform = 'scale(1)'; }); button.addEventListener('mouseleave', function() { this.style.transform = 'scale(1)'; }); })(buttons[i]); } } // 初始化Tab切换功能 document.addEventListener('DOMContentLoaded', function() { // 获取所有Tab项和内容 var tabItems = document.querySelectorAll('.tab-item'); var tabContents = document.querySelectorAll('.tab-content'); var startButtons = document.querySelectorAll('.button.start'); var backButtons = document.querySelectorAll('.button.back'); // 调用按钮点击反馈功能 addButtonFeedback(); // 尝试恢复上次选择的Tab getConfig('last_tab', function(lastTabIndex) { if (lastTabIndex !== '未设置' && !isNaN(lastTabIndex)) { var tabIndex = parseInt(lastTabIndex); if (tabIndex >= 0 && tabIndex < tabItems.length) { // 移除所有active类 for (var i = 0; i < tabItems.length; i++) { tabItems[i].classList.remove('active'); } for (var j = 0; j < tabContents.length; j++) { tabContents[j].classList.remove('active'); } // 添加当前active类 tabItems[tabIndex].classList.add('active'); document.getElementById('tab-' + tabIndex).classList.add('active'); } } }); // 尝试恢复任务选中状态 var checkboxes = document.querySelectorAll('input[type="checkbox"]'); for (var k = 0; k < checkboxes.length; k++) { (function(checkbox) { var taskId = checkbox.id; getConfig('task_' + taskId, function(value) { if (value === 'true') { checkbox.checked = true; } }); })(checkboxes[k]); } // Tab切换功能 for (var l = 0; l < tabItems.length; l++) { (function(item) { item.addEventListener('click', function() { var tabIndex = this.getAttribute('data-tab'); var tabName = this.textContent; // 移除所有active类 for (var m = 0; m < tabItems.length; m++) { tabItems[m].classList.remove('active'); } for (var n = 0; n < tabContents.length; n++) { tabContents[n].classList.remove('active'); } // 添加当前active类 this.classList.add('active'); document.getElementById('tab-' + tabIndex).classList.add('active'); // 保存当前Tab选择 saveUserAction('tab', tabIndex); // 显示提示 toast('切换到' + tabName + '标签'); // 执行原生日志输出 runJS(function() { printl('用户切换到标签: ' + tabName); }); }); })(tabItems[l]); } // 开始按钮点击事件 for (var o = 0; o < startButtons.length; o++) { (function(button) { button.addEventListener('click', function() { // 获取当前激活的标签 var activeTab = document.querySelector('.tab-item.active'); var tabName = activeTab ? activeTab.textContent : '未知'; // 保存操作 saveUserAction('start_button', tabName); // 显示提示 toast('开始' + tabName + '任务'); // 执行原生操作 runJS(function() { printl('用户点击了开始按钮，标签：' + tabName); toast('开始执行' + tabName + '相关任务'); }); }); })(startButtons[o]); } // 返回按钮点击事件 for (var p = 0; p < backButtons.length; p++) { (function(button) { button.addEventListener('click', function() { // 保存操作 saveUserAction('back_button'); // 关闭界面 if (confirm('确定要返回吗？')) { dismiss(); } }); })(backButtons[p]); } // 复选框点击事件 for (var q = 0; q < checkboxes.length; q++) { (function(checkbox) { checkbox.addEventListener('change', function() { var label = this.nextElementSibling.textContent; var taskId = this.id; var status = this.checked ? '完成' : '取消完成'; // 保存任务状态 setConfig('task_' + taskId, this.checked.toString()); // 显示提示 toast(label + ' 已' + status); // 执行原生日志输出 runJS(function() { printl(label + ' 任务被标记为' + status); }); }); })(checkboxes[q]); } // 页面加载完成提示 toast('TabView已启动'); // 记录页面加载时间和设备信息 setConfig('page_load_time', new Date().toISOString()); setConfig('app_version', '1.0.0'); // 演示配置设置 setTimeout(function() { setConfig('demo_setting', 'initialized'); }, 1000); }); </script> </body> </html> `); return web; } // 演示 WebView 的各种方法 function demonstrateWebViewMethods() { printl('开始演示 WebView 控件的各种方法'); // 1. 创建并显示 WebView var webView = createYellowThemedWebViewExample(); printl('1. WebView 已创建并显示黄色主题界面'); // 2. 演示 loadUrl 方法（注释形式，避免实际跳转） // webView.loadUrl('https://www.baidu.com'); printl('2. loadUrl 方法可用于加载网页 URL'); // 3. 演示 loadFile 方法（注释形式） // webView.loadFile('/sdcard/index.html'); printl('3. loadFile 方法可用于加载本地文件'); // 4. 演示 dismiss 方法（注释形式，避免实际关闭） // webView.dismiss(); printl('4. dismiss 方法可用于关闭界面'); printl('WebView 控件方法演示完成'); } // 运行示例 demonstrateWebViewMethods(); 复制代码*

		自动登录	找回密码
密码			立即注册

[宣传软件网站动态] AIWROK软件start.js简单H5直接调用

相关帖子