electron入门教程

官方文档:https://electronjs.org/docs
一、安装配置
1、为你的应用创建一个新的空文件夹 Electron
2、打开你的命令行工具,从该文件夹运行 npm init 会帮助你创建一个基本的 package.json 文件
在这里插入图片描述
3、安装electron npm install --save-dev electron
4、项目根目录新建main.js文件(入口文件)

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

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

  // 并且为你的应用加载index.html
  win.loadFile('index.html')

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

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
  // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

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

// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件,然后用 require 导入。

5、根目录下新建index.html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
	<h1>Hello Electron!!!</h1>
</body>
</html>

6、在package.json文件中配置electron命令

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

7、命令窗口执行 npm run start 命令可以调试内容
到目前为止,生成了一个非常简单的demo。
作为一个桌面应用程序,我们希望直接点击exe文件进行运行。因此用到了electron-packager插件。

二、electron-packager的使用
1、项目根目录下安装 cnpm install electron-packager --save-dev
2、package.json 配置打包命令

"scripts": {
    "start": "electron .",
    "pack": "electron-packager . myFirstElectron --win --out ./dist --arch=x64 --app-version=0.0.1 --electron-version=4.1.4"
  }

打包命令代码的含义解释:

“.”:需要打包的应用目录(.代表当前目录)。

“myFirstElectron”:应用名称。

“–win”:打包平台(windows平台)

" --out ./dist"“:输出目录

“–arch=x64”:64位

“–app-version=0.0.1”:应用版本

“–electron-version=4.1.4”:electron版本
3、执行打包命令 npm run pack
4、在项目根目录下的dist文件夹中找到myFirstElectron.exe打开即可运行

  • 8
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值