2

问题在于本地HTML文件没有正确加载，导致触发了fallback机制。让我们修复这个问题，确保本地HTML文件能够正确加载。

解决方案：正确配置本地HTML文件

1. 首先，让我们创建一个更简单的测试方案

更新main.qml - 移除fallback机制，直接使用内置HTML：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtWebView 1.1

ApplicationWindow {
    id: window
    width: 360
    height: 640
    visible: true
    title: "Qt Android Browser"

    property string jsMessage: "初始化中..."
    property bool isPageLoaded: false
    property int loadProgress: 0

    header: ToolBar {
        height: 50
        background: Rectangle {
            color: "#2196F3"
        }

        Row {
            anchors.fill: parent
            spacing: 5
            padding: 5

            Button {
                width: 80
                height: 40
                text: "加载页面"
                onClicked: loadHTMLPage()
                background: Rectangle {
                    color: parent.down ? "#1976D2" : "#2196F3"
                    radius: 3
                }
                contentItem: Text {
                    text: parent.text
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 12
                }
            }

            Button {
                width: 80
                height: 40
                text: "测试JS"
                onClicked: testJavaScript()
                enabled: isPageLoaded
                background: Rectangle {
                    color: parent.enabled ? (parent.down ? "#1976D2" : "#2196F3") : "#cccccc"
                    radius: 3
                }
                contentItem: Text {
                    text: parent.text
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 12
                }
            }

            Button {
                width: 80
                height: 40
                text: "清空日志"
                onClicked: {
                    jsMessage = "日志已清空"
                }
                background: Rectangle {
                    color: parent.down ? "#1976D2" : "#2196F3"
                    radius: 3
                }
                contentItem: Text {
                    text: parent.text
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    font.pixelSize: 12
                }
            }
        }
    }

    Column {
        anchors.fill: parent
        anchors.topMargin: 50

        // 状态显示区域
        Rectangle {
            width: parent.width
            height: 60
            color: isPageLoaded ? "#E8F5E8" : "#FFF3CD"

            Column {
                anchors.fill: parent
                anchors.margins: 5
                spacing: 2

                Label {
                    text: isPageLoaded ? "✅ 页面已加载" : "⏳ 加载中..."
                    color: isPageLoaded ? "green" : "#856404"
                    font.pixelSize: 12
                    font.bold: true
                }

                Label {
                    text: "进度: " + loadProgress + "%"
                    color: isPageLoaded ? "green" : "#856404"
                    font.pixelSize: 10
                }

                Label {
                    width: parent.width
                    text: jsMessage
                    color: isPageLoaded ? "green" : "#856404"
                    font.pixelSize: 10
                    elide: Text.ElideRight
                    wrapMode: Text.WrapAnywhere
                    maximumLineCount: 2
                }
            }
        }

        // WebView
        WebView {
            id: webView
            width: parent.width
            height: parent.height - 60

            onLoadingChanged: {
                console.log("加载状态:", loadRequest.status)
                
                if (loadRequest.status === WebView.LoadStartedStatus) {
                    isPageLoaded = false
                    loadProgress = 0
                    jsMessage = "开始加载..."
                }
                else if (loadRequest.status === WebView.LoadSucceededStatus) {
                    isPageLoaded = true
                    loadProgress = 100
                    jsMessage = "✅ 页面加载成功"
                    console.log("页面加载成功")
                }
                else if (loadRequest.status === WebView.LoadFailedStatus) {
                    isPageLoaded = false
                    jsMessage = "❌ 加载失败"
                    console.log("加载失败:", loadRequest.errorString)
                }
            }

            onLoadProgressChanged: {
                window.loadProgress = loadProgress
                if (loadProgress < 100) {
                    jsMessage = "加载中... " + loadProgress + "%"
                }
            }
        }
    }

    // 加载内置HTML内容
    function loadHTMLPage() {
        console.log("=== 加载内置HTML ===")
        isPageLoaded = false
        jsMessage = "正在加载HTML..."
        
        var htmlContent = `
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Qt-JS测试页面</title>
                <style>
                    body {
                        font-family: Arial, sans-serif;
                        margin: 20px;
                        background: linear-gradient(135deg, #667eea, #764ba2);
                        color: white;
                    }
                    .container {
                        max-width: 100%;
                        background: rgba(255,255,255,0.1);
                        padding: 20px;
                        border-radius: 10px;
                        backdrop-filter: blur(10px);
                    }
                    h1 {
                        text-align: center;
                        margin-bottom: 20px;
                    }
                    button {
                        background: #4CAF50;
                        color: white;
                        border: none;
                        padding: 10px 15px;
                        margin: 5px;
                        border-radius: 5px;
                        cursor: pointer;
                        width: 100%;
                    }
                    .status {
                        background: rgba(0,0,0,0.3);
                        padding: 10px;
                        border-radius: 5px;
                        margin: 10px 0;
                        font-size: 14px;
                    }
                    .log {
                        background: rgba(0,0,0,0.5);
                        padding: 10px;
                        border-radius: 5px;
                        font-family: monospace;
                        font-size: 12px;
                        max-height: 150px;
                        overflow-y: auto;
                    }
                </style>
            </head>
            <body>
                <div class="container">
                    <h1>🎯 Qt-JS交互测试</h1>
                    
                    <div class="status">
                        <strong>状态:</strong> <span id="status">等待Qt连接...</span>
                    </div>
                    
                    <button onclick="sendToQt('Hello from JS!')">发送消息到Qt</button>
                    <button onclick="sendToQt('时间: ' + new Date().toLocaleString())">发送当前时间</button>
                    <button onclick="showMessage('测试消息')">显示测试消息</button>
                    
                    <div class="log" id="log">
                        <strong>日志:</strong><br>
                    </div>
                </div>

                <script>
                    // 供Qt调用的函数
                    window.receiveFromQt = function(message) {
                        log('📩 收到Qt: ' + message);
                        document.getElementById('status').textContent = '收到Qt消息';
                        
                        // 显示视觉反馈
                        showFeedback('Qt: ' + message);
                        return 'JS收到: ' + message;
                    };

                    window.changeColor = function() {
                        var colors = ['#667eea', '#f093fb', '#4facfe', '#43e97b'];
                        var color = colors[Math.floor(Math.random() * colors.length)];
                        document.body.style.background = 'linear-gradient(135deg, ' + color + ', #764ba2)';
                        log('🎨 颜色已更改: ' + color);
                        return '颜色已更改';
                    };

                    // 发送消息到Qt
                    function sendToQt(message) {
                        log('📤 发送到Qt: ' + message);
                        // 使用自定义URL方案
                        window.location = 'qt://message?data=' + encodeURIComponent(message);
                    }

                    function showMessage(msg) {
                        log('💬 显示消息: ' + msg);
                        document.getElementById('status').textContent = msg;
                    }

                    function showFeedback(text) {
                        var div = document.createElement('div');
                        div.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(76, 175, 80, 0.9); color: white; padding: 20px; border-radius: 10px; z-index: 1000;';
                        div.textContent = text;
                        document.body.appendChild(div);
                        setTimeout(() => div.remove(), 1500);
                    }

                    function log(message) {
                        var logDiv = document.getElementById('log');
                        logDiv.innerHTML += new Date().toLocaleTimeString() + ' - ' + message + '<br>';
                        logDiv.scrollTop = logDiv.scrollHeight;
                    }

                    // 页面加载完成
                    document.addEventListener('DOMContentLoaded', function() {
                        log('✅ 页面就绪');
                        document.getElementById('status').textContent = '就绪';
                    });
                </script>
            </body>
            </html>
        `

        // 使用data URL加载HTML内容
        webView.loadHtml(htmlContent, "file:///android_asset/")
    }

    // 测试JavaScript功能
    function testJavaScript() {
        if (!isPageLoaded) {
            jsMessage = "❌ 页面未加载"
            return
        }

        jsMessage = "🚀 测试JavaScript..."
        console.log("开始JS测试")

        // 测试1: 调用基本函数
        var testMessage = "Qt调用测试 - " + new Date().toLocaleTimeString()
        var jsCode = "window.receiveFromQt('" + testMessage + "')"
        
        webView.runJavaScript(jsCode, function(result) {
            console.log("JS函数返回值:", result)
            jsMessage = "✅ JS调用成功: " + (result || "无返回值")
            
            // 测试2: 改变颜色
            changeColor()
        })
    }

    // 改变页面颜色
    function changeColor() {
        var jsCode = "window.changeColor()"
        webView.runJavaScript(jsCode, function(result) {
            console.log("颜色改变结果:", result)
            jsMessage = "🎨 " + (result || "颜色已改变")
        })
    }

    // 组件加载完成
    Component.onCompleted: {
        console.log("应用启动")
        // 延迟加载页面，确保WebView就绪
        pageLoadTimer.start()
    }

    Timer {
        id: pageLoadTimer
        interval: 1000
        onTriggered: loadHTMLPage()
    }
}

2. 如果上面的方法还有问题，让我们使用最简单的方案：

最简单的测试版本：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtWebView 1.1

ApplicationWindow {
    width: 360
    height: 640
    visible: true
    title: "Qt JS Test"

    property string status: "初始化..."

    WebView {
        id: webView
        anchors.fill: parent
        url: "about:blank"  // 初始空白页

        onLoadingChanged: {
            if (loadRequest.status === WebView.LoadSucceededStatus) {
                status = "页面加载成功"
                console.log("页面加载成功")
                // 注入简单HTML
                injectSimpleHTML()
            }
        }
    }

    Button {
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text: "测试JS"
        onClicked: testJS()
    }

    Text {
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        text: status
        color: "green"
        font.pixelSize: 16
    }

    function injectSimpleHTML() {
        var html = `
            <html>
            <body style="background:lightblue;padding:20px;">
                <h1>简单测试页面</h1>
                <button onclick="alert('JS工作正常!')">测试JS</button>
                <p id="status">等待Qt调用...</p>
                <script>
                    window.sayHello = function(name) {
                        document.getElementById('status').innerHTML = 'Hello ' + name + '!';
                        return 'Hello from JS';
                    };
                </script>
            </body>
            </html>
        `
        webView.loadHtml(html)
    }

    function testJS() {
        webView.runJavaScript("window.sayHello('Qt')", function(result) {
            status = "JS返回: " + result
            console.log("JS返回:", result)
        })
    }

    Component.onCompleted: {
        status = "应用已启动"
        // 直接加载空白页面然后注入HTML
        webView.url = "about:blank"
    }
}

3. 关键修改点：

1. 使用 loadHtml() 而不是外部文件 - 避免文件路径问题
2. 从空白页面开始 - 确保基础环境正常
3. 简化测试流程 - 逐步验证每个功能
4. 移除复杂的fallback机制 - 减少错误点

4. 测试步骤：

1. 运行应用
2. 等待显示"页面加载成功"
3. 点击"测试JS"按钮
4. 应该看到状态更新和可能的alert弹窗

这个方案避免了所有文件路径和网络连接问题，直接在内存中创建HTML内容进行测试。请尝试这个简化版本，应该能够正常工作。