update doc

入门指南.md

@@ -22,9 +22,21 @@
     - [3.4.2 设置路径](#342-设置路径)
   - [3.5 使用TaoQuick组件](#35-使用taoquick组件)
     - [3.5.1 import TaoQuick](#351-import-taoquick)
-    - [1.5.2 使用蓝色按钮组件](#152-使用蓝色按钮组件-1)
+    - [3.5.2 使用蓝色按钮组件](#352-使用蓝色按钮组件)
   - [3.6 运行效果](#36-运行效果)
 - [4. Visual Studio 解决方案使用TaoQuick](#4-visual-studio-解决方案使用taoquick)
+  - [4.1 创建工程](#41-创建工程)
+  - [4.2 拷贝TaoQuick核心库](#42-拷贝taoquick核心库)
+  - [4.3 导入核心库](#43-导入核心库)
+    - [4.3.1 vs 切换到项目的 "属性管理器"页签](#431-vs-切换到项目的-属性管理器页签)
+    - [4.3.2 导入"taoQuick.props"](#432-导入taoquickprops)
+  - [4.4 增加导入路径](#44-增加导入路径)
+    - [4.4.1 两种不同Qml工程的说明](#441-两种不同qml工程的说明)
+    - [4.4.2 设置路径](#442-设置路径)
+  - [4.5 使用TaoQuick组件](#45-使用taoquick组件)
+    - [4.5.1 import TaoQuick](#451-import-taoquick)
+    - [4.5.2 使用蓝色按钮组件](#452-使用蓝色按钮组件)
+  - [4.6 运行效果](#46-运行效果)
 
 # 1、qmake 使用TaoQuick示例
 
@@ -606,7 +618,7 @@ Rectangle {
 
 只要路径正确，QtCreator就可以识别到TaoQuick库，可以直接使用TaoQuick库中的组件。
 
-### 1.5.2 使用蓝色按钮组件
+### 3.5.2 使用蓝色按钮组件
 
 
 这里示例，使用蓝色按钮组件:
@@ -631,4 +643,254 @@ Rectangle {
 ![](doc/start5.png)
 
 
-# 4. Visual Studio 解决方案使用TaoQuick
+# 4. Visual Studio 解决方案使用TaoQuick
+
+## 4.1 创建工程
+
+使用VisualStudio 创建一个简易的Qml工程，或者使用已有的工程。
+
+这里示例创建一个HelloTaoQuick3 工程，内容如下：
+
+![](doc/vs1.png)
+
+## 4.2 拷贝TaoQuick核心库
+
+将TaoQuick/src文件夹下的"TaoQuick子文件夹"及"taoQuick.props"文件拷贝过来，放在HelloTaoQuick3 工程目录下
+
+![](doc/vs2.png)
+
+如图所示，HelloTaoQuick3项目文件夹下，多了一个TaoQuick文件夹，及"taoQuick.props"文件。
+
+## 4.3 导入核心库
+
+通过VS的属性管理器，将taoQuick.props文件导入到项目中即可。
+
+### 4.3.1 vs 切换到项目的 "属性管理器"页签
+
+![](doc/vs3.png)
+
+可以直接点击底部的"属性管理器"页签，也可以通过菜单栏->视图->属性管理器切换
+
+### 4.3.2 导入"taoQuick.props"
+
+选中HelloTaoQuick3工程节点，然后点击 添加按钮，或者右键菜单添加
+
+![](doc/vs4.png)
+
+添加成功后，列表中出现taoQuick即可
+
+![](doc/vs5.png)
+
+
+## 4.4 增加导入路径
+
+### 4.4.1 两种不同Qml工程的说明
+对于一般的Qml工程，最简单的main.cpp内容，可以有两种使用方式，
+
+使用QQuickView：
+
+```C++
+#include <QQuickView>
+#include <QGuiApplication>
+int main(int argc, char **argv)
+{
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+
+    QGuiApplication app(argc, argv);
+    QQuickView view;
+    view.setSource(QUrl("qrc:/main.qml"));
+    view.show();
+    
+    return app.exec();
+}
+```
+
+或者使用QQmlApplicationEngine:
+
+```C++
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+int main(int argc, char *argv[])
+{
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    const QUrl url(QStringLiteral("qrc:/main.qml"));
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
+        &app, [url](QObject *obj, const QUrl &objUrl) {
+            if (!obj && url == objUrl)
+                QCoreApplication::exit(-1);
+        }, Qt::QueuedConnection);
+    engine.load(url);
+
+    return app.exec();
+}
+
+```
+两种用法本质是一样的，细微区别是：
+
+QQuickView本身就是一个主窗口，main.qml顶层元素不能是Window或者Window的子类；
+
+QQmlEngine本身不包含主窗口，main.qml顶层元素必须是Window或者Window的子类。
+
+### 4.4.2 设置路径
+
+我们需要在QmlEngine加载source之前，增加importPath，并把imagePath设置为上下文。
+
+如果主窗口是由QQuickView加载的，则：
+   
+```C++
+    QString importPath = TaoQuickImportPath;
+    importPath = importPath.replace("\\", "/");
+    view.engine()->addImportPath(importPath);
+    view.rootContext()->setContextProperty("taoQuickImportPath", importPath);
+```
+
+如果主窗口是由QQmlEngine加载的，则:
+
+```C++
+    QString importPath = TaoQuickImportPath;
+    importPath = importPath.replace("\\", "/");
+    engine.addImportPath(importPath);
+    engine.rootContext()->setContextProperty("taoQuickImportPath", importPath);
+```
+
+注意：上下文属性的首字母要小写。
+
+完整的代码如下:
+
+QQuickView版本
+```C++
+#include <QQuickView>
+#include <QQmlEngine>
+#include <QQmlContext>
+#include <QGuiApplication>
+int main(int argc, char **argv)
+{
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+
+    QGuiApplication app(argc, argv);
+    QQuickView view;
+    
+    QString importPath = TaoQuickImportPath;
+    importPath = importPath.replace("\\", "/");
+    view.engine()->addImportPath(importPath);
+    view.rootContext()->setContextProperty("taoQuickImportPath", importPath);
+    
+    //setSource 之前，要设置好路径
+    view.setSource(QUrl("qrc:/main.qml"));
+    view.show();
+    
+    return app.exec();
+}
+```
+QQmlApplicationEngine版本:
+
+```C++
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+#include <QQmlContext>
+int main(int argc, char *argv[])
+{
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+
+    QString importPath = TaoQuickImportPath;
+    importPath = importPath.replace("\\", "/");
+    engine.addImportPath(importPath);
+    engine.rootContext()->setContextProperty("taoQuickImportPath", importPath);
+
+    const QUrl url(QStringLiteral("qrc:/main.qml"));
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
+        &app, [url](QObject *obj, const QUrl &objUrl) {
+            if (!obj && url == objUrl)
+                QCoreApplication::exit(-1);
+        }, Qt::QueuedConnection);
+
+    //load 之前，设置好路径
+    engine.load(url);
+
+    return app.exec();
+}
+```
+## 4.5 使用TaoQuick组件
+
+一个简单的main.qml,内容如下：
+
+QQuickView版本
+```qml
+import QtQml 2.0
+import QtQuick 2.9
+
+
+Rectangle {
+    color: "lightblue"
+    width: 640
+    height: 480
+}
+
+```
+Engine版本
+```qml
+import QtQuick 2.9
+import QtQuick.Window 2.9
+
+Window {
+    width: 640
+    height: 480
+    visible: true
+    title: qsTr("Hello World")
+}
+
+```
+
+### 4.5.1 import TaoQuick
+
+接下来增加一行import,导入TaoQuick
+
+```qml
+import TaoQuick 1.0
+import QtQml 2.0
+import QtQuick 2.9
+
+Rectangle {
+    color: "lightblue"
+    width: 640
+    height: 480
+}
+
+```
+导入过后，按一下Ctrl + S，保存一下。
+
+只要路径正确，QtCreator就可以识别到TaoQuick库，可以直接使用TaoQuick库中的组件。
+
+### 4.5.2 使用蓝色按钮组件
+
+
+这里示例，使用蓝色按钮组件:
+```qml
+...
+    CusButton_Blue {
+        width: 120
+        height: 36
+        anchors.centerIn: parent
+        text: "Hello"
+        onClicked: {
+            console.log("hello TaoQuick")
+        }
+    }
+...
+```
+
+## 4.6 运行效果
+ 
+ 最后，运行起来看看效果吧
+
+![](doc/start5.png)
+