JavaScript代码可以被很容易地集成进QML，来提供用户界面（UI）逻辑、必要的控制及其他用途。QML集成JavaScript有两种方式：一种是直接在QML代码中写JavaScript函数，然后调用；另一种是把JavaScript代码写在外部文件中，需要时用import语句导入qml源文件中使用。本文介绍如何导入JavaScript文件。

下面实例往QML源文件中导入外部JS文件来实现图形旋转，运行效果如下图。

具体实现步骤如下。

(1) 新建项目

新建QML应用程序，项目名称为“JSFile”。

(2) 新建JS文件

右击项目视图“Resources” 一 “qml.qrc”下的“/”节点，选择“Add New...”项，弹出“Add New”对话框，选择“Qt”下的“JS File”模板，如下图所示。

单击“Choose...”按钮，在“Location”页输入文件名“myscript”并选择保存路径（本项目文件夹下)。连续单击“下一步”按钮，最后单击“完成”按钮，就在项目中添加了一个js文件。

(3) 编写JS文件

在“myscript.js”中编写代码如下：

function getRandomNumber() { //定义 JavaScript 函数
	return Math.random() * 360; //随机旋转的角度值
}

(4) 新建自定义组件

右击项目视图“Resources” 一 “qml.qrc”下的“/”节点，选择“Add New...”项，新建“RotateRect.qml”文件，编写代码如下:

import QtQuick 2.0
import "myscript.js" as Logic //导入 JS 文件
Rectangle {
  id: rect
  width: 60
  height: 60
  gradient: Gradient { //渐变色增强旋转的视觉效果
    GradientStop { position: 0.0; color: "yellow" }
    GradientStop { position: 0.33; color: "blue" }
    GradientStop { position: 1.0; color: "aqua" }
  }
  Behavior on rotation { //行为动画
  RotationAnimation {
  	direction: RotationAnimation.Clockwise
  }
  }
  MouseArea {
    anchors.fill: parent
    onClicked: rect.rotation = Logic.getRandomNumber();
    //使用导入JS文件中定义的JavaScript函数
  }
}

(5) 编写主程序

打开“main.qml”文件，编写代码如下：

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
  width: 160
  height: 160
  visible: true
  title: qsTr("JSFile")
  RotateRect { //使用 RotateRect 组件
  	x:50;y:50
  }
}

当编写好一个JS文件后，其中定义的函数就可以在任何.qml文件中使用，只需在开头用一句import导入该JS文件即可，而在QML文档中无须再写JavaScript函数，这样就将QML的代码与JavaScript代码隔离开来。

在开发界面复杂、规模较大的QML程序时，一般都会将JavaScript函数写在独立的JS文件中，再在组件的.qml源文件中import (导入）使用这些函数以完成特定的功能逻辑，最后直接在主窗体UI界面上布局这些组件即可。大家在编程时应当有意识地采用这种方式，才能开发出结构清晰、易于维护的QML应用程序。

————————————————

觉得有用的话请关注点赞，谢谢您的支持！

对于本系列文章相关示例完整代码有需要的朋友，可关注并在评论区留言！