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

时间 2019-11-12

标签如何 electron 建立第一个应用 hello world 栏目 JavaScript 繁體版

原文原文链接

什么是Electron

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

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

在开始以前确保Node.js和Electron已经正确安装，能够用node -v,electron -v来看看有没有输出版号信息html
肯定必要环境都安装好以后就能够开始
1. 首先建立一个新的文件夹，能够叫作Hello World
2. 在该文件夹下建立三个文件，分别是index.html，main.js，package.json

index.htmljava

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    Hello World！
  </body>
</html>

main.jsnode

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.jsonnpm

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

最后在Hello World文件夹里打开命令行，输入npm start就能够看到应用打开并且输出Hello，World了
json