云电脑开发日记（二）：客户端与html页面通信

QWebEngineView实现加载html文件

    使用QWebEngineView需要在项目pro文件中添加webenginewidgets 、webchannel模块。

    1. 创建QWebEngineView类，负责加载html

    #include <QWebEngineView>    //引入头文件
    
    QWebEngineView *webView = new QWebEngineView(); //Qt类，可以将html文件显示到这个控件上
    QString htmlpath = "html的绝对路径";   
    QFile file(htmlpath);
    webView->load(QUrl("file:///"+htmlpath));

    2. 创建QWebChannel类,将自定义的交互类注册到QWebChannel中

	#include <QWebChannel>
	
	QWebChannel *webChannel = new QWebChannel();
	webChannel->registerObject("WebChannel_Obj",WebChannel_Obj); //注册通信类
	webView->page()->setWebChannel(webChannel); //注册通道

      其中，自定义的通信类需要继承QObject类，如下

    class WebChannel_Obj : public QObject{
	public slots:
		void jsInvokeQt(const QString &data);	
    }

    3. html使用qwebchannel.js，将通道中的自定义的通信类关联到js的window对象下

	<script src="./qwebchannel.js">
	//引入qwebchannel.js，本文文件附件中为qwebchannel.js

	<script type="text/javascript">
		//创建一个QWebChannel对象，并将C++中注册的类加载到前端
		new QWebChannel(qt.webChannelTransport, function(channel){
			//前端js和客户端C++进行关联，其中window.WebChannel_Obj是在js中自己定义的名称
			//window是js的全局对象
			window.WebChannel_Obj = channel.objects.WebChannel_Obj;
		});
	</script>

    4. html页面与Qt类通信

    (1) js调用C++类

	<script type="text/javascript">
		function jsInvoke(){
		//调用自定义辅助类的成员函数jsInvokeQt
		WebClientBridge_obj.jsInvokeQt("hyf");
	</script>

    (2)C++类调用js

webView->page()->runJavaScript("js脚本")；

webEngineView控件qml实现网页加载

 在qml中如何实现加载html5页面，实现的核心是如何进行进程或者线程间通信
上文中我们使用了QWebEngine类实现了客户端与html页面的通信，本节通过qml中的组件webEngineView实现客户端与html页面的通信。
webEngineView实现与html通信：
(1) 首先需要将自定义辅助类注册到qml中 (qmlRegisterType()函数将C++类注册到qml中或者直接在qml中创建QtObject类)
(2) WenChannel组件在注册时必须有WebChannel.id，如何将C++注册进来的类也拥有id

    1.创建QtObject控件

    QtObject{
        id: someObject
        WebChannel.id: "webChannelObj"  //
        property string name: "hanyongfeng"
        signal someSignal(string message);
        function jsInvokeQml(){}
    }
    WebChannel{
	    id: channel
	    registeredObjects: [webChannelObj]  //Qt类注册到通道需要添加 []
    }
    WebEngineView{
	    webChannel: channel   //上面WebChannel定义的id
    }

    2. webEngineView组件加载html组件

//html具体布局
WebEngineView{
    id: webEngineViewIndex
    url: "../html/index.html"  //html路径，可以使用相对路径
    webChannel: channel        //关联上文的WebChannel的id
}

    3. 在html页面声明类，供js端调用qml组件属性

	<script>
    	new QWebChannel(qt.webChannelTransport, function (channel) {
        	window.webChannelObj = channel.objects.webChannelObj; //将通道中的Qt类声明到js中
    	});
    	function jsInvoke(){
	    	alert("jsInvokeQml(), the value is ："+webChannelObj.name)
    	}
	</script>

    4. qml调用js函数

	MouseArea{
		onClicked: {
			//webEngineViewIndex组件为webEngineView控件
			webEngineViewIndex.runJavaScript("jsInvoke()");  //执行js脚本
		}
	}