安装

全局下安装

npm install electron-prebuilt -g

在自己想要的路径下

nam install electron-prebuilt –save-dev

安装完的文件中找到electron.exe，把自己写的文件拖进去就能运行了

基本结构

  • index.html
  • package.json
  • main.js ( 运行的入口 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//main.js
const {app, BrowserWindow} = require('electron')
let win
function creatWindow(){
  win = new BrowserWindow({
    width:800,
    height:600
  })
  win.loadURL(`file://${__dirname}/index.html`)
  win.on('close',() => {
    win = null
  })
}
app.on('ready',creatWindow)
app.on('window-all-close',() => {
  if(process.platform !== 'darwin'){
    app.quit()
  }
})
app.on('active',() => {
  if(win === null){
    createWindow()
  }
})

打包

npm install electron-packager -g

先安装打包的工具

electron-packager ./ –platform=win32 –arch=x64

打包exe（electron-builder）

npm install electron-builder -g –save-dev

在项目文件夹下安装依赖，electron的依赖也要加进来

修改package.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name":"app",
  "version":"0.1.0",
  "main":"main.js",
  "description":"xxx",
  "anthor":"xxx",
  "devDependencies":{
    "electron-builder":"^6.7.3",
    "electron-prebuilt":"^1.3.5"
  },
  "scripts":{
    "dist":"npm run dist:win",
    "dist:win":"built --platform=win32 --arch=x64"
  },
  "build":{
    "appId":"xxx",
    "category":"xx",
    "win":{
      "iconUrl":"xxx"
    }
  }
}

在项目文件下运行：

npm run dist

生成一个dist文件夹，里面有打包好的exe的win和未打包的

开发知识点记录

1.主进程和渲染进程

例子：在网页中加上关闭按钮，点击的时候app关闭

ipc模块在主进程和渲染进程中起通信的作用

1
2
3
4
5
//render.js
var ipc = require('electron').ipcRenderer;
$('#btn').click(function(){
  ipc.send('close-main-window');
})
1
2
3
4
5
//main.js
const ipc = require('electron').ipcMain;
ipc.on('close-main-window',()=>{
  app.quit()
})

2.窗口最小化最大化

查看官网文档，BrowserWindow里有最大最小化的方法

1
2
3
4
5
//最小化
ipcMain.on('event', () => {
  BrowserWindow.getFocusedWindow().minimize()
})
//最大化是maximize()，恢复最大化前unmaximize()

碰到的问题

jquery 读不到，”$ not found”

方法：

1
2
3
4
5
6
7
8
<script>
  if(typeof module === 'object'){
    window.module = module;
    module = undefine;
  }
</script>
<script src="lib/jquery.min.js"></script>
<script>if(window.module) module = window.module;</script>

webview缓存问题（未能加载最新的资源）

方法：

1
2
//win是BrowserWindow的实例
win.webContents.clearHistory()

（或许更新的时候打包带上版本号或者时间戳之类的方式也可以解决问题，待后续验证）