| |  |  |  |  |  | AIWROK软件start.js简单H5直接调用
                              复制代码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();
 
 |  |  |  |  |  | 
 |