NodeJS, Electron 构建你的桌面程序

1. 安装electron, electron-prebuilt

$ npm install cnpm -g --registry=http://registry.npm.taobao.org
$ cnpm install electron -g
$ cnpm install electron-prebuilt -g

2. 安装electron-packager, electron-builder, asar

$ cnpm install electron-packager -g
$ cnpm install electron-builder -g
$ cnpm install asar -g

3. 初始化项目

$ cnpm init

执行完后, 当前目录下生成package.json文件

{
  "name": "own-runner",
  "version": "1.0.0",
  "description": "神器",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "PeopleName",
  "license": "ISC"
}

4. 添加index.html, index.js

index.html

    
    


    Hello World!

    点击这里

index.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// 保存窗口对象的全局引用, 如果不这样做, 当JavaScript对象被当做垃圾回收时，window窗口会自动关闭
let win

function createWindow () {
  // 创建浏览器窗口.
  win = new BrowserWindow({width: 800, height: 600,autoHideMenuBar :true})

  win.setMenu(null);

  // 加载项目的index.html文件.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
  // 当窗口关闭时候的事件.
    slashes: true
  }))

  // 打开开发工具.
  //win.webContents.openDevTools()

  win.on('closed', () => {
    // 取消引用窗口对象, 如果你的应用程序支持多窗口，通常你会储存windows在数组中，这是删除相应元素的时候。
    console.log("haha");

    win = null
  })
}

app.on('activate', () => {
  console.log('activate')
  if (win === null) {
    createWindow()
  } else {
    win.show()
  }
})

// 当Electron完成初始化并准备创建浏览器窗口时，将调用此方法
// 一些api只能在此事件发生后使用。
app.on('ready', createWindow)

// 当所有窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在macOS上，用得多的是应用程序和它们的菜单栏，用Cmd + Q退出。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，当点击dock图标并且没有其他窗口打开时，通常会在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow()
  }
})

5. 修改package.json

"scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
},
"build": {
    "appId": "随意",
    "win": {
        
    }
},

7. 打包或运行

$ npm|cnpm|yarn install
$ npm|cnpm|yarn dist #dist目录下生成exe文件
$ npm|cnpm|yarn start #运行 

Ref.

Electron: https://electronjs.org/docs