一、使用場景
使用情景就是不可再修改的QML或者js檔案，可定義成子產品，分為如下情況
1、自定義控件
這裡的自定義控件可以了解為最小機關控件，不可再修改，與QML的Button、Text等有同樣的地位；不要與能夠修改或者帶邏輯的控件混淆；
2、存放公共變量、函數的JS
如某個JS檔案裡存放工程所需的公共函數；
3、字型庫等
如FontAwesome。
本文以自定義公共控件為例 。
文章最後為大家準備了Qt資料
↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡↡
二、工程準備
1、建立工程，在根目錄下添加專門存放QML檔案的檔案夾：
Qml 2、Qml檔案夾添加資源檔案用于管理所有QML檔案
qml.qrc 3、資源檔案添加字首
qml 可根據自己需要設定其他名字，也可不添加
4、在Qml檔案夾裡新增檔案夾
WPControls 這個檔案夾以後就用于存儲我們所有的公共/自定義控件
5、在WPControls檔案夾裡添加一些自定義QML控件，注意大寫字母開頭。這裡增加了三個：
FaBtn.qml
WpTextInput.qml
ComboboxView.qml 6、在WPControls檔案夾裡添加檔案：qmldir，并輸入子產品資訊、控件資訊
module WPControls
WPFaBtn 1.0 FaBtn.qml
WpTextInput 1.0 WpTextInput.qml
ComboboxView 1.0 ComboboxView.qml WPControls：子產品名，必須寫在開頭
WPFaBtn、WpTextInput、ComboboxView：控件名
1.0：版本号
Xxx.qml：對應qml檔案
7、通過qml.qrc資源檔案将所有自定義QML檔案添加到工程
8、設定QML運作時搜尋庫路徑
上面的步驟隻是将子產品定義好了，但是運作的時候QML是無法找到這個子產品的，是以需要告訴QML去哪裡尋找子產品。
可以寫一個單例類做這個事情：
方法就是：擷取運作main.qml的view的engine，通過addImportPath函數，将尋找路徑放進去。
為什麼這個路徑是：qrc:/qml呢？
【這個有個重點也是難點，這地方弄錯了會運作時報：xxx子產品沒有安裝】
因為在Qt裡一個子產品就是一個檔案夾，這裡我們的子產品就是WPControls檔案夾，我們需要告訴Qt我們的子產品檔案夾在哪裡，通過第七步的圖可看到，WPControls檔案夾的就在qrc:/qml裡。
這個"qml"就是我們資源檔案的字首，如果沒有字首【也就是字首為：/】，那麼這裡應該填：qrc:/
9、使用子產品
import QtQuick 2.6
import QtQuick.Window 2.2
import WPControls 1.0 //引入子產品
Rectangle {
visible: true
width: 640
height: 480
//自定義的控件
WPFaBtn{
}
} 9、設定子產品語義高亮
其實前面步驟完成之後，程式是可以正常運作起來了的，但是我們可能看到import子產品時，QtCreator提示沒有找到這個子產品，這個問題單純就是在工程非運作時，Qt不知道這個子產品在哪裡，畢竟上面第八步的import函數是寫在cpp中，隻有運作才有效。
是以為了解決這個問題，我們打開.pro檔案，加入這句話：
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH += $PWD/Qml #support:WPControls 這句話代表，QtCreator高亮文法時，會從目前的Qml檔案夾下去查找子產品，如果找到了就不會報錯了。
注意這裡的路徑是檔案夾路徑，是以源碼路徑為基礎往下查找的地方【PWD就是目前源碼路徑】；
而第八步的import路徑是以資源檔案路徑，以qrc開頭。【即使有多個qrc檔案，Qt都認為是一個qrc，隻通過字首去區分？】
PS：
1、檢視cpp中目前import了的路徑：
QQmlApplicationEngine engine;
for(QString path : engine.importPathList())
qDebug() << path; 2、設定單例控件
qml檔案開頭：
//XXX.qml
pragma Singleton qmldir：
singleton XXX 1.0 XXX.qml 3、QML找子產品的步驟
import XXX 1.0 ①、在addImportPath的路徑和預設路徑裡去找XXX檔案夾
②、沒找到則報子產品未安裝；
③、找到了則加載XXX檔案夾裡的qmldir檔案，解析裡面的執行個體化内容
這樣了解了，就容易填這個路徑了
4、如果運作沒有問題，并且很确定高亮路徑也沒有問題，但是代碼就是高亮失敗，可以嘗試重新開機下QtCreator
5、如果XXX是一個檔案夾，并且是一個子產品【裡面有個qmldir】，如果裡面有個a.qml，那麼這個a.qml是不能import XXX 1.0的，運作時會報找不到檔案
6、
qmldir: 用于組織自定義的QML插件
.qmltypes：qml插件的解釋檔案，用于QtCreator文法高亮。可通過Qt提供的工具qmlplugindump自動生成
QML_IMPORT_PATH: 導入插件路徑，以支援插件的文法高亮。個人了解是如果純QML檔案的擴充，沒有封裝到C++中，則直接導入路徑，即可支援文法高亮，如果有C++封裝，則需要通過.qmltypes支援高亮。
addImportPath: 添加import尋址目錄，c++代碼裡添加，沒有前兩項，隻是QtCreator不能高亮，沒有這種，則插件無法使用
Qt開發學習路線
Qt學習資料→「連結」