雅荷心语
心之所向便是光

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作
关注本站
- 微信
- 微博
- 腾讯微博
- Twitter
- Facebook
- RSS订阅

Hi, 请登录我要注册找回密码

使用 Electron 打包桌面应用

2017-10-10 分类：前端之旅阅读(2546) 评论(0)

首先安装 electron-packager

npm install --save-dev electron-packager

新建三个文件,分别是: package.json, main.js ,index.html

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "test",
  "main": "main.js",
  "author": "天明",
  "scripts": {
    "start": "electron .",
  },
  "devDependencies": {
    "electron-prebuilt": "^1.3.5",
    "electron-packager": "latest"
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

{

"name": "test",

"version": "1.0.0",

"description": "test",

"main": "main.js",

"author": "天明",

"scripts": {

"start": "electron .",

},

"devDependencies": {

"electron-prebuilt": "^1.3.5",

"electron-packager": "latest"

}

main.js

const { app, BrowserWindow } = require('electron')
let win
function createWindow() {
    win = new BrowserWindow({ width: 800, height: 600 })
    win.loadURL(`file://${__dirname}/index.html`)
    win.webContents.openDevTools() //开启调试工具
    win.on('close', () => {
        win = null
    })
    win.on('resize', () => {
        win.reload()
    })
}
app.on('ready', createWindow)
app.on('window-all-cloased', () => {
    if (process.platform !== 'drawin') {
        app.quit()
    }
})
app.on('activate', () => {
    if (win === null) {
        createWindow()
    }
})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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

let win

function createWindow() {

win = new BrowserWindow({ width: 800, height: 600 })

win.loadURL(`file://${__dirname}/index.html`)

win.webContents.openDevTools() //开启调试工具

win.on('close', () => {

win = null

})

win.on('resize', () => {

win.reload()

})

}

app.on('ready', createWindow)

app.on('window-all-cloased', () => {

if (process.platform !== 'drawin') {

app.quit()

}

})

app.on('activate', () => {

if (win === null) {

createWindow()

}

})

index.html

里面写入html代码啦~

完成后, npm install 安装依赖!

打包应用

electron-packager <location of project> <name of project> <platform> <architecture> <electron version><optional options>

我现在打包应用, 直接 electron-packager ./

λ ls -lh
total 70k
drwxr-xr-x 22 Administ Administ 4.0k Oct 9 09:31 channel-win32-x64/
-rw-r–r– 1 Administ Administ 4.2k Oct 9 09:21 favicon.ico
-rw-r–r– 1 Administ Administ 159 Oct 9 09:28 index.html
-rw-r–r– 1 Administ Administ 604 Oct 9 09:28 main.js
drwxr-xr-x 1 Administ Administ 128k Oct 9 09:29 node_modules/
-rw-r–r– 1 Administ Administ 383 Oct 9 09:36 package.json

生成的 channel-win32-x64/ 就是我们的桌面应用文件了!

打开: hello world

分享到：更多 ()

标签：前端界面