Qt混合式开发

Qt混合式开发

一、简介

本片文章简单的来介绍Qt中混合式开发。
首先说明下什么是混合式开发，混合式开发简单的来说就是原生+H5开发，由两部分组成：原生应用客户端与H5网页,原生应用客户端为H5网页提供运行框架与为支持，H5实现界面展示与程序业务。
混合式开发的优点：
1、开发效率高，节约时间。同一套代码Android和IOS基本上都可使用；
2、更新和部署比较方便，每次升级版本只需要在服务器端升级即可；
3、代码维护方便、版本更新快，节省产品成本；
4、比web版实现功能多；
5、可离线运行。

二、Qt混合式开发介绍

混合式开发的主要内容是在原生的框架上加载h5网页和原生与js交互。
Qt加载网页：
使用QWebEngineView加载网页。
//定义QWebEngineView 对象
QWebEngineView webview = new QWebEngineView();
//加载网页
webview ->page()->load(QUrl(“https://www.baidu.com”));
与Js交互：
使用QWebChannel与Js交互。
网上找的一些与Js的交互的方法都需要在js文件中加载“qwebchannel.js”（Qt安装目录中可以找到）文件和添加如下方法：
// QT交互
new QWebChannel(qt.webChannelTransport, function(channel) { window.bridgeJS = channel.objects.bridge; })；
但是如果这样的话就需要前端开发人员开发Js是加入这句话和需要打包“qwebchannel.js”到前端文件中，这样的话每次第一次和前端人员定交互接口时就需要和他们说明，很是麻烦，所以我找到了一个方法，在原生的代码中以脚本的形式注入网页中，这样的话就不需要前端开发人员为了Qt专门添加上述代码。
QWebChannel channel = new QWebChannel();
//读取qwebchannel.js文件
QFile webChannelJsFile("qwebchannel.js");
if( !webChannelJsFile.open(QIODevice::ReadOnly) ) {
qDebug() << QString("Couldn't open qwebchannel.js file: %1").arg(webChannelJsFile.errorString());
}
else {
qDebug() << "OK webEngineProfile";
QByteArray webChannelJs = webChannelJsFile.readAll();
//添加new QWebChannel(qt.webChannelTransport, function(channel)；
webChannelJs.append(
"\n"
"var workoutCreator"
"\n"
"new QWebChannel(qt.webChannelTransport, function(channel) {"
" window.bridge_js = channel.objects.bridge_name; "
"});"
"\n"
"function enableSaveButton(forceOff) {"
"if (forceOff) {$('#btn-save-workout').prop('disabled', true);return;}"
"var nameValue = $('#name-workout').val();"
"var planValue = $('#plan-workout').val();"
"var creatorValue = $('#creator-workout').val();"
"if (nameValue.length > 0 && creatorValue.length > 0 && planValue.length > 0) {$('#btn-save-workout').prop('disabled', false);}"
"else {$('#btn-save-workout').prop('disabled', true);}"
"}"
);

//创建QWebEngineScript对象,（QWebEngineScript类封装了一个JavaScript程序。）
QWebEngineScript script;
script.setSourceCode(webChannelJs);//设置源码webChannelJs
script.setName("qwebchannel.js");//设置名称
script.setWorldId(QWebEngineScript::MainWorld);//设置world id QWebEngineScript::MainWorld:网页内容使用的世界。在某些情况下，向Web内容公开自定义功能可能很有用。
script.setInjectionPoint(QWebEngineScript::DocumentCreation);//将脚本的执行点设置为一旦创建文档，脚本将立即执行。
script.setRunsOnSubFrames(false);//不在子框架运行
// profile->scripts()->insert(script);
//创建web引擎页对象
QWebEnginePage *myPage = new QWebEnginePage(profile,this);
this->setPage(myPage);//设置web引擎页
myPage->scripts().insert(script);//添加脚本

channel = new QWebChannel(); //创建通道对象用于与JS交互
//注册交互对象
channel->registerObject("bridge_name",this);
// 这里注册对象名"name"需要与JS函数用到的名称一致
this->page()->setWebChannel(channel);
}
}
Js调用原生的接口必须是公共的槽函数。
原生调用Js接口：
//“update()”为Js接口
Webview->page()->runJavaScript(“update()”);

三、封装的web类

以下是我自己封装的web类

#ifndef QWEBVIEW_H
#define QWEBVIEW_H
#include <QtWebEngineWidgets/QWebEngineView>
#include <QtWebChannel/QtWebChannel>
#include <QWebEngineProfile>
#include <QWebEngineScript>
#include <QWebEngineScriptCollection>
#include <QDebug>
#include <QtBluetooth/QBluetoothAddress>
#include <QJsonObject>
#include <QJsonArray>
#include <QMenu>
#include <QWebEngineSettings>
class QWebview : public QWebEngineView
{
    Q_OBJECT
public:
    QWebview(QString sUrl,QWidget *parent = nullptr);
    ~QWebview() override;

public slots:
//js调用原生的接口
    void getInfo();
QWebChannel* channel = nullptr;
QString strUrl;
};

#endif // QWEBVIEW_H

#include "qwebview.h"
#include "qbridge.h"
QWebview::QWebview(QString sUrl, QWidget *parent):QWebEngineView(parent)
{
     {
        QWebEngineProfile *profile = QWebEngineProfile::defaultProfile(); //获取Web引擎默认配置文件。
        //读取qwebchannel.js文件
        QFile webChannelJsFile("qwebchannel.js");
        if(  !webChannelJsFile.open(QIODevice::ReadOnly) ) {
            qDebug() << QString("Couldn't open qwebchannel.js file: %1").arg(webChannelJsFile.errorString());
        }
        else {
            qDebug() << "OK webEngineProfile";
            QByteArray webChannelJs = webChannelJsFile.readAll();
            //添加new QWebChannel(qt.webChannelTransport, function(channel)；
            webChannelJs.append(
                        "\n"
                        "var workoutCreator"
                        "\n"
                        "new QWebChannel(qt.webChannelTransport, function(channel) {"
                        "     window.bridge_js = channel.objects.bridge_name;  "
                        "});"
                        "\n"
                        "function enableSaveButton(forceOff) {"
                        "if (forceOff) {$('#btn-save-workout').prop('disabled', true);return;}"
                        "var nameValue = $('#name-workout').val();"
                        "var planValue =   $('#plan-workout').val();"
                        "var creatorValue = $('#creator-workout').val();"
                        "if (nameValue.length > 0 && creatorValue.length > 0 && planValue.length > 0) {$('#btn-save-workout').prop('disabled', false);}"
                        "else {$('#btn-save-workout').prop('disabled', true);}"
                        "}"
                        );

            //创建QWebEngineScript对象,（QWebEngineScript类封装了一个JavaScript程序。）
            QWebEngineScript script;
            script.setSourceCode(webChannelJs);//设置源码webChannelJs
            script.setName("qwebchannel.js");//设置名称
            script.setWorldId(QWebEngineScript::MainWorld);//设置world id  QWebEngineScript::MainWorld:网页内容使用的世界。在某些情况下，向Web内容公开自定义功能可能很有用。
            script.setInjectionPoint(QWebEngineScript::DocumentCreation);//将脚本的执行点设置为一旦创建文档，脚本将立即执行。
            script.setRunsOnSubFrames(false);//不在子框架运行
//                    profile->scripts()->insert(script);
            //创建web引擎页对象
            QWebEnginePage *myPage = new QWebEnginePage(profile,this);
            this->setPage(myPage);//设置web引擎页
            myPage->scripts().insert(script);//添加脚本
            channel = new QWebChannel();   //创建通道对象用于与JS交互
        channel->registerObject("bridge_name",this/*reinterpret_cast<QObject*>(QBridge::getBridge())*/);
            // 这里注册对象名"name"需要与JS函数用到的名称一致
            this->page()->setWebChannel(channel);
        }
    }

    strUrl = sUrl;
    this->page()->load(QUrl(sUrl));

    this->settings()->setAttribute(QWebEngineSettings::LocalStorageEnabled, false);
    //这就实现了JS调用C++函数，实现网页向QT传递数据
    this->page()->setBackgroundColor(QColor(255,255,255,0));
}

QWebview::~QWebview()
{
    qDebug() << "QWebview::~QWebview()";
    delete  channel;
    channel = nullptr;
}
void QWebview::getInfo()
{
    qDebug() << "getAllSensorInfo";
}