QML 中引用 js 文件闪退问题

问题描述

在移植 Android 中遇到这样一个引用兼容性问题，起因是这样的，Windows 版本的采用了 QML 分离的方式加载，而 Android 版本又采用了 qrc 的方式。而 Qt 中的机制是采用 QML 分离方式时则使用相对路径的方式引用 js 文件，而采用 qrc 的方式则需要使用 qrc 的方式引用 js 文件。且两种方式不能同时使用。

在项目开发时使用了 Windows 下 QML 分离的方式加载，在 qml 文件中使用相对路径的方式引用了 js 文件，在 Android 环境下编译运行时程序闪退。

Windows 下引用方式

import "./js/ui.js" as UI

Android 下编译报错信息

无法找到 qrc:/qml/js/ui/js

验证过程

尝试过很多中方式来验证兼容性，最终找到一种比较巧妙的方式解决。

通过代码中平台判断区分，不可行，qml 头部区域不能使用判断语句

if(Qt.platform.os === "android")import "./js/ui.js" as UI
elseimport "qrc:/js/js/ui.js" as UI

引用两个 js，使用时分开，不可行，仍然会报错

import "./js/ui.js" as UI
import "qrc:/js/js/ui.js" as AUI// 使用时
Qt.platform.os === "android" ? AUI : UI

解决方案

在 qml 中仍然使用相对路径的方式，Qt Android 编译时自动转换为 qrc 方式加载。

根据 QT 编译时报错的信息 qrc:/qml/js/ui/js 可以判断系统将相对路径自动转换为了 qrc 的方式，所以只要正好使用相对路径时并转换为 qrc 的方式也可以使用。

通过分析发现，可以直接 qml.qrc 中引用的路径，将原来的 <qresource prefix="/qml"> 改为 <qresource prefix="/">，并且将 <qresource prefix="/js"> 下的 js 文件移动到 <qresource prefix="/"> 下，这样正好相对路径转换为 qrc 方式后可用。

修改前：

<RCC><qresource prefix="/qml"><file>main.qml</file><file>TitleBar.qml</file><file>CenterMain.qml</file><file>home/MachineStatus.qml</file><file>base/DCChisel.qml</file><file>base/DCPan.qml</file><file>base/FoldButton.qml</file><file>base/LedLight.qml</file><file>base/LedTag.qml</file><file>base/LineInfo.qml</file><file>base/RisableInput.qml</file><file>base/StatusIndicator.qml</file><file>base/TComboBox.qml</file><file>base/TElseTheme.qml</file><file>base/ToolTitle.qml</file><file>base/TSelector.qml</file><file>base/TSpinBox.qml</file><file>base/TWaitBox.qml</file><file>dialog/DateSelect.qml</file><file>dialog/LicenseConfirm.qml</file><file>dialog/InfoConfirm.qml</file><file>dialog/PasswordInput.qml</file><file>home/CncProgress.qml</file><file>home/NcInfo.qml</file><file>home/NcImage.qml</file><file>home/CncBar.qml</file><file>tool/ProcessPage.qml</file><file>tool/WorkMode.qml</file><file>tool/Setting.qml</file><file>tool/Monitor.qml</file><file>tool/Update.qml</file><file>tool/Maintain.qml</file><file>tool/mode/Offline.qml</file><file>tool/mode/LinkLogin.qml</file><file>tool/mode/AreaNet.qml</file><file>tool/mode/CloudDisk.qml</file><file>tool/mode/FabricateChisel.qml</file><file>tool/mode/FabricatePan.qml</file><file>tool/update/Lifecycle.qml</file><file>tool/update/fwUpdate.qml</file><file>tool/update/DCUpdate.qml</file><file>tool/update/SpindleUpdate.qml</file><file>DeviceList.qml</file><file>tool/setting/BusinessInfo.qml</file><file>tool/setting/CalibertionRecord.qml</file><file>tool/setting/CommandSettings.qml</file><file>tool/setting/MachineConfig.qml</file><file>tool/setting/ManualOperation.qml</file><file>tool/setting/ProcessParameter.qml</file><file>tool/setting/ResetToFactory.qml</file><file>tool/setting/ServoOperation.qml</file><file>tool/setting/SpindleExportation.qml</file><file>tool/setting/ToolAxisesCalc.qml</file><file>tool/setting/ToolPosition.qml</file><file>tool/setting/UpdateRecord.qml</file><file>home/Device.qml</file><file>tool/maintain/Calibration.qml</file><file>tool/maintain/DeviceInformation.qml</file><file>tool/maintain/ToolRecord.qml</file><file>tool/maintain/ToolStateBar.qml</file><file>tool/maintain/ToolControl.qml</file><file>tool/maintain/LogExport.qml</file><file>tool/maintain/HistroyRecord.qml</file><file>tool/maintain/ParamExportImport.qml</file><file>tool/maintain/SDCardConfig.qml</file><file>tool/maintain/BreakPointProcess.qml</file><file>home/MessageQueue.qml</file><file>tool/maintain/AutoReflueling.qml</file><file>tool/maintain/SpindleMT.qml</file><file>tool/maintain/WorkspaceMT.qml</file><file>tool/update/Panel_list.qml</file><file>tool/maintain/ToolConfig.qml</file><file>help/HelpPage.qml</file><file>help/Language.qml</file><file>help/CncUpdate.qml</file><file>help/Service.qml</file><file>OutageContine.qml</file><file>tool/DCList.qml</file><file>tool/maintain/ExitAffirm.qml</file><file>ContinueProcess.qml</file><file>tool/setting/RDCDebug.qml</file><file>tool/setting/rdc/RDCControl.qml</file><file>tool/setting/rdc/RDCParam.qml</file><file>base/TCell.qml</file><file>base/TMenuItem.qml</file></qresource><qresource prefix="/js"><file>js/cncParam.js</file><file>js/machineParam.js</file><file>js/func.js</file><file>js/servoParam.js</file><file>js/ui.js</file></qresource><qresource prefix="/"/>
</RCC>

修改后：

<RCC><qresource prefix="/"><file>main.qml</file><file>TitleBar.qml</file><file>CenterMain.qml</file><file>home/MachineStatus.qml</file><file>base/DCChisel.qml</file><file>base/DCPan.qml</file><file>base/FoldButton.qml</file><file>base/LedLight.qml</file><file>base/LedTag.qml</file><file>base/LineInfo.qml</file><file>base/RisableInput.qml</file><file>base/StatusIndicator.qml</file><file>base/TComboBox.qml</file><file>base/TElseTheme.qml</file><file>base/ToolTitle.qml</file><file>base/TSelector.qml</file><file>base/TSpinBox.qml</file><file>base/TWaitBox.qml</file><file>dialog/DateSelect.qml</file><file>dialog/LicenseConfirm.qml</file><file>dialog/InfoConfirm.qml</file><file>dialog/PasswordInput.qml</file><file>home/CncProgress.qml</file><file>home/NcInfo.qml</file><file>home/NcImage.qml</file><file>home/CncBar.qml</file><file>tool/ProcessPage.qml</file><file>tool/WorkMode.qml</file><file>tool/Setting.qml</file><file>tool/Monitor.qml</file><file>tool/Update.qml</file><file>tool/Maintain.qml</file><file>tool/mode/Offline.qml</file><file>tool/mode/LinkLogin.qml</file><file>tool/mode/AreaNet.qml</file><file>tool/mode/CloudDisk.qml</file><file>tool/mode/FabricateChisel.qml</file><file>tool/mode/FabricatePan.qml</file><file>tool/update/Lifecycle.qml</file><file>tool/update/fwUpdate.qml</file><file>tool/update/DCUpdate.qml</file><file>tool/update/SpindleUpdate.qml</file><file>DeviceList.qml</file><file>tool/setting/BusinessInfo.qml</file><file>tool/setting/CalibertionRecord.qml</file><file>tool/setting/CommandSettings.qml</file><file>tool/setting/MachineConfig.qml</file><file>tool/setting/ManualOperation.qml</file><file>tool/setting/ProcessParameter.qml</file><file>tool/setting/ResetToFactory.qml</file><file>tool/setting/ServoOperation.qml</file><file>tool/setting/SpindleExportation.qml</file><file>tool/setting/ToolAxisesCalc.qml</file><file>tool/setting/ToolPosition.qml</file><file>tool/setting/UpdateRecord.qml</file><file>home/Device.qml</file><file>tool/maintain/Calibration.qml</file><file>tool/maintain/DeviceInformation.qml</file><file>tool/maintain/ToolRecord.qml</file><file>tool/maintain/ToolStateBar.qml</file><file>tool/maintain/ToolControl.qml</file><file>tool/maintain/LogExport.qml</file><file>tool/maintain/HistroyRecord.qml</file><file>tool/maintain/ParamExportImport.qml</file><file>tool/maintain/SDCardConfig.qml</file><file>tool/maintain/BreakPointProcess.qml</file><file>home/MessageQueue.qml</file><file>tool/maintain/AutoReflueling.qml</file><file>tool/maintain/SpindleMT.qml</file><file>tool/maintain/WorkspaceMT.qml</file><file>tool/update/Panel_list.qml</file><file>tool/maintain/ToolConfig.qml</file><file>help/HelpPage.qml</file><file>help/Language.qml</file><file>help/CncUpdate.qml</file><file>help/Service.qml</file><file>OutageContine.qml</file><file>tool/DCList.qml</file><file>tool/maintain/ExitAffirm.qml</file><file>ContinueProcess.qml</file><file>tool/setting/RDCDebug.qml</file><file>tool/setting/rdc/RDCControl.qml</file><file>tool/setting/rdc/RDCParam.qml</file><file>base/TCell.qml</file><file>base/TMenuItem.qml</file><file>js/cncParam.js</file><file>js/machineParam.js</file><file>js/func.js</file><file>js/servoParam.js</file><file>js/ui.js</file></qresource>
</RCC>