Technology selection

At the beginning, I actually wanted to make a tool for planning Excel to json. At that time, I considered: CocosCreator plug-in, direct use of node command line, make small software

CocosCreator plug-in

I started with the CocosCreator plugin

  1. There are no technical hurdles, and there are already several small plug-ins on the shelves.
  2. Equivalent to a small software, provides a visual operation.

But there are a few problems:

  1. Not friendly enough to departments using other engines.
  2. After all, it is for planning, not to mention whether to install CocosCreator, the problem is that every operation needs to open CocosCreator, this step is relatively tedious.
  3. After all, there’s Excel-killer for the little prince.

Node

In fact, node command line mode, also just flash idea, basic is not feasible.

  1. Inconvenient, no visual interface.
  2. Installing environments is more difficult for non-technical people than installing cocoscreators.

Software form

  1. Visual, cross-platform, universal
  2. Read about electron

Question:

  1. Know about = heard about

However, the program ape naturally likes to explore the quality of the toss, so the choice of Electron.

Run through the process

Install the electron

In this article, the default reader has js development experience and has installed the Node environment. Official documentation, always one of the best.

This is how it should be installed, according to the official documentation

mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron
Copy the code

In short, create a directory and install electron in this directory. Of course, you can install electron globally. I’m not focused on this, so I choose local installation.

Create three files according to the official documents. For details, refer to the official documents.

  1. Index.html is the interface we need
<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World! </title> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> </head> <body style="background: white;" > <h1>Hello World! </h1> <p> We are using Node.js <span id="node-version"></span>, Chromium <span id="chrome-version"></span>, and Electron <span id="electron-version"></span>. </p> </body> </html>Copy the code
  1. Preload. js is equivalent to a script in HTML
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})
Copy the code
  1. So how does the interface work? How are preload.js and index.html linked? Please look at the main. Js
const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) 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() } })Copy the code

debugging

Add a line “scripts”: {“start”: “electron.”} to package.json, modify the file as follows:

{"name": "my-electron app", "version": "0.1.0", "author": "your name", "description": "my electron app", "main": "main.js", "scripts": { "start": "electron ." } }Copy the code

Then execute NPM start.

packaging

The official documentation recommended Electron Forge, but I couldn’t install it successfully and had to give up. So here, I’m going to use the electron Builder instead.

  1. Install the electron – builder
npm install  electron-builder --save-dev
Copy the code
  1. Modify the package. The json

Add “build”: “electron- builder-MW “to scripts, complete as follows

{"name": "my-electron app", "version": "0.1.0", "author": "your name", "description": "my electron app", "main": "main.js", "scripts": { "start": "electron .", "build": "electron-builder" } }Copy the code
  1. Execute the command
npm run build
Copy the code

Do not know, you network how, anyway, I am not successful packaging, and then Baidu, found from github download resources, fortunately, taobao image provides, continue to modify.

  1. Modify the mirror

In the build add “electronDownload” : {” mirror “:” https://npm.taobao.org/mirrors/electron/ “}, and complete the following

{"name": "my-electron app", "version": "0.1.0", "author": "your name", "description": "my electron app", "main": "main.js", "scripts": { "start": "electron .", "build": "electron-builder" }, "build": { "electronDownload": { "mirror": "https://npm.taobao.org/mirrors/electron/" } }, }Copy the code

I am using MAC, DMG generated after execution, I guess Windows should generate EXE, not said good cross-platform?? Can only generate their own platform?? Continue with 2.

  1. Add packing parameters
    "scripts": {
        "start": "electron .",
        "build": "electron-builder -mw"
    },
Copy the code

At this point we can package MAC and Windows, where M stands for MAC, W stands for Windows, and L stands for Linux. If you need a Linux platform, add it.

Summary of problems in the development process

  1. Dialog doesn’t pop up

Add a button in HTML, click the button can pop up a dialog, but it does not show, according to my years of native development experience, I feel that it may be related to the thread, but there is no specific explanation. What other ways to cut threads, directly reported an error. Later it was official documentation that told me I could communicate between the render thread and the main thread.

In the render thread

// Import ipcRenderer const {ipcRenderer} = require('electron'); // Send the event ipcrenderer. send(event name, no parameters); Ipcrenderer. on(event name, (event,... args)=>{});Copy the code

In the main thread

const { ipcMain } = require('electron'); // Send the event ipcmain. send(event name, no parameters); Ipcmain. on(event name, (event,... args)=>{});Copy the code
  1. The selection file has no callback

That’s what some people write

dialog.showOpenDialog({
  properties: ['openDirectory']
}, (files)=>{})
Copy the code

But there is no callback, query for a long time, only to find that this is the old version of the writing method, should be written like this

  dialog.showOpenDialog({
    properties: ['openDirectory']
  }).then((result) => {
    // result:{canceled:boolean, filePaths:string[]}
  }).catch();
Copy the code
  1. icon

If you want to add an icon to the software, there are various answers on the Internet. I don’t know whether it is due to the old version or the different packaging tools. I found that it is very simple: create a build directory and put a 512 pixel icon named: icon.png.

The problem summary

Check the official documents, is the way to solve the problem, and do not be afraid of English, that few simple words, even do not need to understand each word, read the main part of the line.

instructions

Because the tool is not perfect, such as does not support object nesting, etc., will not be issued for the time being, if you want to experience the next, you can contact me.