At present, with the development of the Internet and mobile Internet, the multi-terminal development framework has become a better choice for more and more developers. There are mainly the following prospects:
-
Increasing demand for cross-platform development: Due to the differences between different platforms and devices, developers need to use different programming languages and development tools to write different applications for each platform and device. The cross-platform development framework can build consistent applications on different platforms by sharing part of the code, thereby reducing development costs.
-
The mobile application market is growing rapidly: According to research data, the mobile application market continues to grow. In 2018, the global mobile application market revenue exceeded US$93 billion, and it is expected to reach US$1.25 trillion globally by 2023. This means that developers will have more opportunities to use cross-platform development frameworks to build applications for multiple mobile platforms.
-
Diversification of user devices: As people rely more and more on digital products, the types and numbers of user devices are also increasing, and applications need to be developed for different devices. The cross-platform development framework can support multi-platform and multi-device application development, bringing greater convenience to developers.
Generally speaking, multi-terminal development frameworks are the future development trend. Although the characteristics and applicable scenarios of each framework are different, with the continuous advancement of technology, these frameworks will become more mature and perfect. Therefore, for developers and enterprises, learning and applying the multi-terminal development framework will be a very promising choice.
Framework introduction
There are many multi-terminal development frameworks on the desktop PC side. The following are some common frameworks and their introductions, advantages and disadvantages:
1. Qt：
Qt is a set of cross-platform C++ application development framework. It provides a comprehensive, easy-to-use API that helps developers build mobile applications, robotic control systems, automotive, embedded devices, and various other types of applications. Official website: https://www.qt.io/zh-cn/product
advantage:
- Applications written in C++ are high performance and responsive
- Support cross-platform development and achieve the goal of reusing code
- Provides a large number of basic classes and methods to simplify development work
shortcoming:
- Due to the C++ development method, the learning curve is relatively steep and requires a high technical level
- It is a bit complicated when designing the UI interface, which is not as simple and easy to understand as the more popular front-end frameworks
2. Electron：
Electron is a Chromium and Node.js based framework for building desktop applications with HTML, CSS and JavaScript. Official website: https://www.electronjs.org/zh
advantage:
- Use a familiar front-end technology stack for application development
- Quickly create native applications compatible with macOS, Windows, and Linux
- Active community and strong scalability
shortcoming:
- High CPU and memory requirements may cause the program to run slowly.
- Electron applications often consume large memory and disk space.
3. Flutter：
Flutter is a cross-platform mobile application framework developed by Google that can build high-performance, beautiful applications with a single code base. Official website: https://flutter.cn/
advantage:
- High performance, fast response, and better user experience.
- Using the Dart language, it is easy to learn and use.
- Quickly build application interfaces with flexible UI libraries and components
shortcoming:
- It is not as rich as native SDK support and may be limited.
- Differences between different operating systems and devices need to be considered
To sum up, Qt, Electron, and Flutter have their own advantages and disadvantages, and developers need to choose according to actual needs. Qt is more suitable for applications that require higher performance, while Electron is suitable for rapid development of desktop applications, and Flutter can be used to build cross-platform high-frequency refresh applications (such as games) and have little contact with native code. Some pure front-end app types.
basic use
1. Qt
The Qt toolset includes an IDE called "Qt Creator", which is the officially recommended IDE for Qt. Qt Creator integrates a powerful code editor, automatic build and deployment tools, debugger, and graphical user interface designer to help developers complete the entire application development process. At the same time, it also supports multiple programming languages, such as C++, QML and JavaScript, etc., which can facilitate cross-platform development.
In addition to Qt Creator, you can also use other IDEs or text editors that support Qt development, such as Visual Studio, Eclipse, Sublime Text, etc., and manually configure the compilation environment to achieve the same effect as Qt Creator. However, for beginners, it is more convenient and faster to use Qt Creator.
The following is a detailed tutorial for getting started with Qt:
- Install Qt
First, you need to download and install Qt Creator. The official website provides Windows, Mac and Linux versions for download: https://www.qt.io/download
During installation, you can choose the required components to install according to your individual needs.
- create new project
After opening Qt Creator, click the "New Project" button to create a new Qt project. In the pop-up "Projects" window, select the "Application" type, and then select "Qt Widgets Application" or "Qt Quick Application".
- Write code
Qt Creator provides an integrated code editor that supports both C++ and QML languages. Each application consists of a .pro file and a main source file (main.cpp), where they can be opened and edited.
In the main.cpp file, you can create the window and output something, for example:
#include <QApplication>
#include <QPushButton>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QPushButton button("Hello World", nullptr);
button.setGeometry(100, 100, 100, 50);
button.show();
return a.exec();
}
The above code creates a button and sets its initial position, size and display on the screen. After launching the application, you will be able to see a simple window and a button.
- debug and build
Debugging tools such as gdb can be used directly in Qt Creator. The code can be debugged by inserting a breakpoint in main.cpp, and the current execution status will be displayed on the left side of the editor.
Building and compiling the application can be done via the "Build" button. Qt Creator also provides a wealth of build tools that support multiple types of builds and platforms. During the build process, you can also set some parameters, such as optimization level, to optimize application performance.
2. Electron
There are no special compiler requirements for Electron development. Commonly used compilers include Visual Studio Code, Atom, Sublime Text, etc. These editors support JavaScript and HTML, and can be integrated with Electron. They provide code highlighting, smart prompts, Debugging and other functions, and users can also choose the compiler they are used to according to their preferences. It is recommended to use Visual Studio Code, because it provides rich extensions and integrated development environment (IDE) functions, and also supports debugging Electron applications, which can improve development efficiency.
The following is an introductory tutorial for Electron:
- Install Node.js and npm
Before installing Electron, you need to install Node.js and npm. You can download the installation package for your system from the official website. Download address: https://nodejs.org/en/download/
- Install Electron
After completing the installation of Node.js and npm, you can use the npm command to install Electron
npm install electron --save-dev
The --save-dev parameter means adding Electron to the project dependencies.
- Create a new Electron application
Create an empty folder to store the application, and open a terminal to enter the directory, then run the following command:
npm init -y
This command will generate a package.json file in the folder, which records information such as the name, version and dependencies of the application.
- write application code
A file called package.json was created in the previous steps, which contains basic information about the application. This file can be edited to add dependencies required by the application.
Then, create a main process file main.js under the folder where the source code of the application is saved, and write the core logic of the Electron application in it. For example, the following code creates a simple window.
const {
app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
- run the application
After writing the application code, you can run the application with the following command:
npm start
This command will start the Electron application and open the main window.
3. Flutter
Google's open source cross-platform UI development framework Flutter