如何用Electron Js创建第一个应用Hello World

什么是Electron

Node.js和Chromium的结合品。允许只使用HTML，CSS和JavaScript来开发跨平台桌面应用。

编写第一个Electron程序（Hello World）

1. 在开始之前确保Node.js和Electron已经正确安装，可以用node -v,electron -v来看看有没有输出版号信息

2. 确定必要环境都安装好之后就可以开始
   1. 首先创建一个新的文件夹，可以叫做Hello World
   2. 在该文件夹下创建三个文件，分别是index.html，main.js，package.json

index.html

  
    
    
  
  
    Hello World！
  

---

main.js

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require("path");
const url = require("url");   //基本是electron应用必备的语句，用来导入包，处理不同的内容


let win;    //让JavaScript不要回收窗口，保持全局引用

function createWindow(){
    win = new BrowserWindow();
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file',
        slashes: true
    }));    //载入对应的html文件

    win.on('closed', ()=> {
        win = null;
    }) //关闭窗口时释放掉
}   //创建窗口的函数

app.on('ready', createWindow);   //打开应用时，调用createWindow，即创建窗口函数

---

package.json

{
  "name": "electron-js-test",  //应用的名字
  "version": "1.0.0",   //应用的版本
  "main": "main.js", //主进程
  "scripts": {
    "start": "electron ."
  }     //告诉npm应该加载什么命令
}

---

最后在Hello World文件夹里打开命令行，输入npm start就可以看到应用打开而且输出Hello，World了

转载于:https://www.cnblogs.com/MartinLwx/p/10506349.html