创建electron应用

Electron就是可以让你用Javascript、HTML、CSS来编写运行于Windows、macOS、Linux系统之上的桌面应用的库

设置目录

your-app/
├── package.json
├── main.js
└── index.html

创建package.json

npm init

安装Electron

cnpm install electron --save-dev

修改package.json,增加start命令指向electron,设定入口为main.js,参照下面代码:

"main": "main.js",
"scripts": {
    "start": "electron ."
}

创建最简Electron项目

创建main.js文件,添加下面的代码。
创建index.html文件,添加下面的代码。
终端运行命令npm start,这时会弹出一个应用窗口(本质是一个浏览器),显示了hello electron文字(来自index.html页面)。

main.js

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

let win;

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

    //加载index.html
    win.loadFile('index.html')
    //打开开发者工具
    win.webContents.openDevTools()
    //当window被关闭,这个事件会被触发
    win.on('closed', () => {
        //取消引用window对象
        win = null
    })
}

//electron 会在初始化后准备  创建浏览器窗口时,调用这个函数
// 部分 API 在 ready 事件触发后才能使用。
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()
})

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>hello</div>
</body>

</html>

打包发布MacOS应用

复制node_modules文件夹下electron/dist/Electron.app到项目下out文件夹里面。(之所以用out是上面再.gitignore里面我们让git忽略了这个文件夹)
右键Electron.app显示包内容,进入到contents/Resources文件夹,新建一个app文件夹,这里就是放置所有页面的地方。
把项目里面的package.json,main.js,index.html文件拷贝到app文件夹。
然后你可以把Electron.app重命名任意名字,拷贝到任意地方,运行起来都是我们上面编写的效果。
你可以从网上下载icns苹果系统专用的图标文件,覆盖Electron.app报内容里面contents/Resources内的electron.icns,然后Electron.app被复制到其他地方时候图标就会改变。

https://www.easyicon.net/covert/在线把png图片转为icns图标

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页