2.4 Introduction to computer/mobile client development

2.4 Introduction to computer/mobile client development

    Want to develop a mobile app? Can't develop PC client? does not exist! Be able to write a webpage in a few steps to convert the webpage into a PC or mobile client.

    We can develop desktop clients with the help of electron, the open source library of node.js. What is node.js? It is a javascript runtime environment similar to a browser, which can run js programs without the browser.

    Open the webpage and you can run the H5 program directly. Why develop a desktop program? Because the desktop program can access the hardware, for example, we need to read the computer serial port data and draw, then the H5 webpage program can do nothing.

    The first step is to install the node.js runtime. Go to the official website https://nodejs.org to find the version of the corresponding operating system and install it. The open interface is as follows:

   Most of the operations are basically command lines. The next steps (you need to enter commands on the command line and execute them) are as follows:

  • Install electron globally (this tool is used to develop desktop programs and supports Win/macOS/*inx mainstream operating systems):
npm install --g electron-prebuilt 
  • Create a new package.json file (configuration program) in an empty folder:
{
  "name": "appDemo",
  "version": "0.1.0",
  "main": "./main.js",
  "scripts": {
    "start": "electron ."
  },}
  • Install electron in the current directory and add dependencies (need to cd to the current directory):
 npm install --save-dev electron-prebuilt

After execution, the package.json file becomes (the main.js file inside is the main file of the program):

{
  "name": "appDemo",
  "version": "0.1.0",
  "main": "./main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron-prebuilt": "^1.4.13"
  }
}
  • Write logic code main.js:
const electron = require('electron');const app = electron.app;const url = require('url');const path = require('path');mainWindow=null;function createWindow() {
  mainWindow = new electron.BrowserWindow({
    width: 800,
    height: 600
  });
 
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname,'index.html'),
    protocol:'file:',
    slashes: true
  }));

  mainWindow.on('closed', () => {
    mainWindow = null;
  });}app.on('ready', createWindow);
  • Simple interface index.html (this page has only one line)
<h1>Hello World!</h1>
  • Program running and packaging

    The client enters the command: electron. (there is a dot here), and then you can observe the running program (that is, the index.html webpage you wrote), which is equivalent to writing a browser, but this browser you You can add functions at will.

    If you need to package the program, you also need to install electron-packager:

install --save-dev electron-packager

    The packaged program can be separated from the development environment and copied to other PCs to run.

    Electron has "one-time development, all mainstream operating systems can run the characteristics", development efficiency and cross-platform features have advantages. This section only gives the basic steps of PC client development, and interested readers can find the tutorial by themselves. You can also use cordova to develop a mobile client. Since it is not related to this tutorial, I won't repeat it.

Reference: https://cloud.tencent.com/developer/article/1178782 2.4 Introduction to Computer/Mobile Client Development-Cloud + Community-Tencent Cloud