【QT Quick】基础语法：导入外部JS文件及调试

在 QML 中，可以使用 JavaScript 来实现业务逻辑的灵活性和简化开发。接下来我们会学习如何导入 JavaScript 文件，并在 QML 中使用它，同时也会介绍如何调试这些 JavaScript 代码。

导入 JavaScript 文件

在 QML 中导入 JavaScript 文件的方式如下：

• 首先，新建一个 JavaScript 文件，例如命名为 myJs.js，在文件中定义一些函数：

// myJs.js
function myFunc1() {
    console.log("Called myFunc1");
}

function myFunc2() {
    console.log("Called myFunc2");
}

function getTitle() {
    return "Dynamic Title from JS";
}

• 在 QML 文件中使用 import 导入该文件，并为其指定一个别名：

import "myJs.js" as MyJS

• 在 QML 中可以直接调用 JavaScript 中的函数，例如：

import QtQuick 2.15
import QtQuick.Controls 2.15
import "myJs.js" as MyJS

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: MyJS.getTitle() // 动态获取标题

    Button {
        text: "Call JS Functions"
        anchors.centerIn: parent
        onClicked: {
            MyJS.myFunc1();
            MyJS.myFunc2();
        }
    }
}

这样，点击按钮时会调用 JavaScript 文件中的 myFunc1() 和 myFunc2()，并在控制台中打印出相应的信息。

调试 JavaScript 代码

在 QML 中调试 JavaScript 可以通过设置断点、单步执行等方式进行。以下是具体的方法：

• 设置断点：在 Qt Creator 中，你可以在 QML 或 JavaScript 文件中的某一行代码上点击行号，设置一个断点。断点用于暂停程序运行，以便查看当前的状态和变量值。

• 开始调试：

  • 你可以点击左下角的“调试”按钮，或者按 F5 开始调试程序。
  • 当代码运行到断点时，程序会暂停，方便你查看当前的执行情况。

• 单步调试：

  • F10：单步执行（不进入函数），用于逐行执行代码。
  • F11：单步进入函数，适用于想要深入函数内部查看的情况。

• 查看变量值：

  • 在调试模式下，当程序暂停在断点处时，可以在右侧的调试窗口中看到所有可用的变量及其当前的值。
  • 你还可以在下方的调试控制台 (QML Debug Console) 中输入变量名或表达式来查看其值。例如：

  console.log(MyJS.getTitle()); // 查看 getTitle 函数的返回值
  

• 使用调试控制台：

  • 调试控制台不仅可以显示输出信息，还可以直接输入 JavaScript 表达式来查看或修改变量的值，例如：

  myVar += 10; // 修改变量的值
  

调试技巧

• 断点与断点操作：

  • 可以在 QML 文件和 JavaScript 文件的任何可执行行设置断点，方便查看代码逻辑的执行顺序。
  • 调试时，可以用 F5 运行到下一个断点，也可以用 F10 或 F11 来逐步跟踪代码。

• 查看函数调用层次：

  • 在调试过程中，右侧的“调用栈”区域可以查看当前代码的调用层次，这对于排查复杂调用关系中的错误非常有用。

• 使用调试控制台：

  • 调试控制台允许输入和执行 JavaScript 表达式，非常适合在暂停状态下进一步验证逻辑和变量的值。

• 灵活使用工具：

  • 在调试过程中，通过 Qt Creator 的各个视图（例如调用栈、变量视图、断点视图等）可以获得代码运行的详细信息，帮助定位和解决问题。

通过这些调试手段，你可以更容易地找出和修复 QML 和 JavaScript 中的错误，提升代码的质量和可靠性。