 | |  |  | AIWROK软件分享一个特效苹果H5页面
- //🍎交流QQ群711841924群一,苹果内测群,528816639
- // 创建一个黄色主题风格的 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;
- position: relative;
- overflow: hidden;
- box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
- border-radius: 10px;
- transform: scale(0.95);
- animation: entrance 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
- }
-
- @keyframes entrance {
- from {
- transform: scale(0.8) translateY(50px);
- opacity: 0;
- }
- to {
- transform: scale(0.95) translateY(0);
- opacity: 1;
- }
- }
-
- /* Tab样式 */
- .tab-header {
- display: flex;
- background: linear-gradient(90deg, #ff9800, #ff5722);
- 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:hover {
- background-color: rgba(255, 255, 255, 0.1);
- }
-
- .tab-item.active {
- font-weight: bold;
- background-color: rgba(255, 255, 255, 0.2);
- }
-
- .tab-item.active::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 25%;
- width: 50%;
- height: 3px;
- background-color: #fff;
- border-radius: 3px;
- animation: tabIndicator 0.3s ease-out;
- }
-
- @keyframes tabIndicator {
- from {
- width: 0;
- left: 50%;
- }
- to {
- width: 50%;
- left: 25%;
- }
- }
-
- /* 内容区域样式 */
- .tab-content {
- display: none;
- padding: 16px;
- animation: fadeIn 0.5s ease-out;
- }
-
- .tab-content.active {
- display: block;
- }
-
- @keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
- }
-
- /* 标题样式 */
- .title-header {
- text-align: center;
- margin-bottom: 16px;
- }
-
- .title-label {
- font-size: 22px;
- color: #ff9800;
- font-weight: bold;
- position: relative;
- display: inline-block;
- }
-
- .title-label::after {
- content: '';
- position: absolute;
- bottom: -5px;
- left: 0;
- width: 100%;
- height: 3px;
- background: linear-gradient(90deg, #ff9800, #ffca28);
- border-radius: 3px;
- transform: scaleX(0);
- transform-origin: right;
- transition: transform 0.3s ease;
- }
-
- .title-label:hover::after {
- transform: scaleX(1);
- transform-origin: left;
- }
-
- /* 分隔线 */
- .divider {
- height: 1px;
- background: linear-gradient(90deg, transparent, #e8e8e8, transparent);
- 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;
- position: relative;
- overflow: hidden;
- transition: all 0.3s ease;
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
- }
-
- .button::before {
- content: '';
- position: absolute;
- top: 0;
- left: -100%;
- width: 100%;
- height: 100%;
- background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
- transition: 0.5s;
- }
-
- .button:hover::before {
- left: 100%;
- }
-
- .button:active {
- transform: scale(0.95);
- }
-
- .button.start {
- background: linear-gradient(135deg, #ff9800, #ffc107);
- }
-
- .button.back {
- background: linear-gradient(135deg, #ff5722, #ff9800);
- }
-
- /* 内容标题 */
- .content-title {
- font-size: 18px;
- color: #ff5722;
- margin-bottom: 12px;
- font-weight: bold;
- animation: slideInLeft 0.5s ease-out;
- }
-
- @keyframes slideInLeft {
- from {
- transform: translateX(-20px);
- opacity: 0;
- }
- to {
- transform: translateX(0);
- opacity: 1;
- }
- }
-
- /* 任务分类 */
- .category-label {
- font-size: 18px;
- color: #ff5722;
- margin-top: 16px;
- margin-bottom: 8px;
- font-weight: bold;
- position: relative;
- padding-left: 15px;
- }
-
- .category-label::before {
- content: '';
- position: absolute;
- left: 0;
- top: 2px;
- width: 8px;
- height: 8px;
- background-color: #ff5722;
- border-radius: 50%;
- animation: pulse 2s infinite;
- }
-
- @keyframes pulse {
- 0% {
- transform: scale(1);
- box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.7);
- }
- 70% {
- transform: scale(1.2);
- box-shadow: 0 0 0 10px rgba(255, 87, 34, 0);
- }
- 100% {
- transform: scale(1);
- box-shadow: 0 0 0 0 rgba(255, 87, 34, 0);
- }
- }
-
- /* 任务项 */
- .task-container {
- background-color: #fff;
- padding: 12px 0;
- display: flex;
- align-items: center;
- border-bottom: 1px solid #f0f0f0;
- transition: all 0.3s ease;
- transform: translateX(0);
- }
-
- .task-container:hover {
- background-color: #f9f9f9;
- transform: translateX(5px);
- }
-
- .task-checkbox {
- display: flex;
- align-items: center;
- width: 200px;
- }
-
- .task-checkbox input[type="checkbox"] {
- width: 20px;
- height: 20px;
- margin-right: 10px;
- cursor: pointer;
- accent-color: #ff9800;
- }
-
- .task-checkbox label {
- font-size: 16px;
- cursor: pointer;
- transition: all 0.2s ease;
- }
-
- .task-checkbox input[type="checkbox"]:checked + label {
- color: #ff9800;
- font-weight: bold;
- }
-
- /* 设置项 */
- .settings-container {
- background-color: #fff;
- border-radius: 8px;
- overflow: hidden;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
- }
-
- /* 运行特效 */
- .running-effect {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.7);
- z-index: 1000;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- opacity: 0;
- pointer-events: none;
- transition: opacity 0.3s ease;
- }
-
- .running-effect.active {
- opacity: 1;
- pointer-events: all;
- }
-
- .effect-content {
- background: linear-gradient(135deg, #ff9800, #ffc107);
- padding: 30px;
- border-radius: 20px;
- text-align: center;
- color: white;
- max-width: 80%;
- transform: scale(0.8);
- animation: effectEntrance 0.5s ease-out forwards;
- }
-
- @keyframes effectEntrance {
- to {
- transform: scale(1);
- }
- }
-
- .effect-spinner {
- width: 60px;
- height: 60px;
- border: 5px solid rgba(255, 255, 255, 0.3);
- border-radius: 50%;
- border-top-color: white;
- animation: spin 1s linear infinite;
- margin: 0 auto 20px;
- }
-
- @keyframes spin {
- to {
- transform: rotate(360deg);
- }
- }
-
- .effect-text {
- font-size: 24px;
- font-weight: bold;
- margin-bottom: 20px;
- }
-
- .effect-subtext {
- font-size: 16px;
- opacity: 0.9;
- }
-
- /* 苹果风格波纹效果 */
- .ripple {
- position: absolute;
- border-radius: 50%;
- background-color: rgba(255, 255, 255, 0.7);
- transform: scale(0);
- animation: ripple 0.6s linear;
- pointer-events: none;
- }
-
- @keyframes ripple {
- to {
- transform: scale(2.5);
- opacity: 0;
- }
- }
- </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" onclick="runScriptEffect()">开始</button>
- <button class="button back" onclick="handleBack()">返回</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">抖音极速</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" onclick="runScriptEffect()">开始</button>
- <button class="button back" onclick="handleBack()">返回</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" onclick="runScriptEffect()">开始</button>
- <button class="button back" onclick="handleBack()">返回</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" onclick="runScriptEffect()">开始</button>
- <button class="button back" onclick="handleBack()">返回</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" onclick="runScriptEffect()">开始</button>
- <button class="button back" onclick="handleBack()">返回</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 class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-3">
- <label for="settings-3">快极速新手模式</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-4">
- <label for="settings-4">喜番</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-5">
- <label for="settings-5">快手</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-6">
- <label for="settings-6">正式</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-7">
- <label for="settings-7">快极速周期</label>
- </div>
- </div>
- <div class="task-container">
- <div class="task-checkbox">
- <input type="checkbox" id="settings-8">
- <label for="settings-8">抖音系周期</label>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 运行特效遮罩层 -->
- <div class="running-effect" id="runningEffect">
- <div class="effect-content">
- <div class="effect-spinner"></div>
- <div class="effect-text">正在运行AIWROK苹果脚本</div>
- <div class="effect-subtext">请稍候...</div>
- </div>
- </div>
-
- <script>
- // 模拟原生环境的交互方法
- // 在实际环境中,这些方法由原生应用提供
- if (typeof setConfig === 'undefined') {
- function setConfig(key, value) {
- printl('设置配置:', key, '=', value);
- try {
- // 尝试使用localStorage
- localStorage.setItem(key, value);
- printl('localStorage设置成功:', key, '=', value);
- // 优化提示内容
- if (key && key.startsWith('last_')) {
- showToast('操作已记录');
- } else {
- showToast('配置已设置');
- }
- } catch (e) {
- printl('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) || '未设置';
- printl('从localStorage获取配置:', { key: key, value: value });
- } catch (e) {
- // 降级到内存存储
- printl('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) {
- printl('显示提示:', message);
- showToast(message);
- }
- }
-
- if (typeof runJS === 'undefined') {
- function runJS(func) {
- printl('运行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() {
- printl('关闭界面');
- showToast('关闭界面操作');
- }
- }
-
- if (typeof runFile === 'undefined') {
- function runFile(filePath) {
- printl('运行脚本文件:', filePath);
- showToast('运行脚本文件: ' + filePath);
- }
- }
-
- // 保存用户操作到配置
- function saveUserAction(action, value) {
- var timestamp = new Date().toISOString();
- printl('保存用户操作:', action, '时间戳:', timestamp);
- setConfig('last_' + action, timestamp);
- if (value) {
- printl('保存操作值:', 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.8);
- color: white;
- padding: 15px 25px;
- border-radius: 25px;
- font-size: 16px;
- z-index: 9999;
- opacity: 0;
- transition: opacity 0.3s, transform 0.3s;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
- backdrop-filter: blur(10px);
- max-width: 80%;
- text-align: center;
- \`;
- 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)';
-
- // 3秒后自动消失
- toast.timer = setTimeout(function() {
- toast.style.opacity = '0';
- toast.style.transform = 'translate(-50%, -50%) scale(0.9)';
- }, 3000);
- }
-
- // 添加波纹效果
- function createRipple(event) {
- const button = event.currentTarget;
- const circle = document.createElement("span");
- const diameter = Math.max(button.clientWidth, button.clientHeight);
- const radius = diameter / 2;
-
- const rect = button.getBoundingClientRect();
- const x = event.clientX - rect.left - radius;
- const y = event.clientY - rect.top - radius;
-
- circle.style.width = circle.style.height = \`\${diameter}px\`;
- circle.style.left = \`\${x}px\`;
- circle.style.top = \`\${y}px\`;
- circle.classList.add("ripple");
-
- const ripple = button.getElementsByClassName("ripple")[0];
- if (ripple) {
- ripple.remove();
- }
-
- button.appendChild(circle);
- }
-
- // 绑定波纹效果到按钮
- document.querySelectorAll('.button').forEach(button => {
- button.addEventListener('click', createRipple);
- });
-
- // Tab切换功能
- document.querySelectorAll('.tab-item').forEach(tab => {
- tab.addEventListener('click', function() {
- const tabId = this.getAttribute('data-tab');
-
- // 更新激活状态的Tab
- document.querySelectorAll('.tab-item').forEach(t => {
- t.classList.remove('active');
- });
- this.classList.add('active');
-
- // 显示对应的内容
- document.querySelectorAll('.tab-content').forEach(content => {
- content.classList.remove('active');
- });
- document.getElementById(\`tab-\${tabId}\`).classList.add('active');
- });
- });
-
- // 运行脚本特效
- function runScriptEffect() {
- const effect = document.getElementById('runningEffect');
- effect.classList.add('active');
-
- // 模拟脚本运行过程
- setTimeout(() => {
- effect.classList.remove('active');
- showToast('脚本运行完成!');
- }, 3000);
- }
-
- // 返回功能
- function handleBack() {
- printl('用户点击了返回按钮');
- saveUserAction('back_button_click');
- toast('正在返回...');
- dismiss();
- }
-
- // 页面加载完成后初始化
- window.addEventListener('load', function() {
- printl('页面加载完成,初始化完成');
- showToast('页面加载成功');
- });
-
- // 添加按钮点击反馈
- 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();
复制代码
| |  | |  |
|