Electron简单例子

Electron 可以使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。我们可以把它看作一个 Node. js 的变体,它专注于桌面应用而不是 Web 服务器端。

从开发的角度来看,Electron 应用本质上是一个 Node. js 应用程序。 与 Node.js 模块相同,应用的入口是 package.json 文件。 一个简单的 Electron 项目包含三个基本文件:package.jsonindex.hmtlmain.js

  • package.jsonNode.js项目的配置文件。
  • index.html 是桌面应用的界面页面。
  • main.js 是应用的启动入口文件。
创建项目

我们在指定路径中新建一个名为 my_electron 的文件夹作为项目根目录,然后在命令工具中使用 cd 命令,将当前目录更改为项目根目录:

>cd C:\Users\lu\Desktop\my_electron

如下图所示:


然后执行 npm init 命令进行项目初始化,如下图所示:


命令执行成功后,项目根目录下会创建一个 package.json 文件,如果全部选择默认配置,则可以直接执行 npm init -y 命令。

修改package.json

我们可以修改创建好的 package.json 文件,在 scripts 中添加脚本命令,如下所示:

{
   
  "name": "blogs",
  "version": "1.0.0",
  "description": "",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个简单Electron React 项目实例: 1. 创建一个新的项目文件夹并进入该文件夹: ``` mkdir electron-react-app cd electron-react-app ``` 2. 初始化 npm 项目: ``` npm init -y ``` 3. 安装必要的依赖项: ``` npm install --save electron react react-dom npm install --save-dev electron-builder babel-cli babel-preset-env babel-preset-react webpack webpack-cli webpack-dev-server html-webpack-plugin ``` 4. 创建一个 webpack 配置文件 webpack.config.js: ``` const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, '/dist'), filename: 'index_bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; ``` 5. 创建一个 .babelrc 配置文件: ``` { "presets": ["env", "react"] } ``` 6. 创建一个入口文件 src/index.js: ``` import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(<h1>Hello, Electron and React!</h1>, document.getElementById('root')); ``` 7. 创建一个 HTML 文件 src/index.html: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Electron React App</title> </head> <body> <div id="root"></div> <script src="index_bundle.js"></script> </body> </html> ``` 8. 创建一个 main.js 文件作为 Electron 主进程文件: ``` const { app, BrowserWindow } = require('electron'); const path = require('path'); const url = require('url'); let mainWindow; function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600 }); mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'dist', 'index.html'), protocol: 'file:', slashes: true })); mainWindow.on('closed', function () { mainWindow = null }); } app.on('ready', createWindow); app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit() } }); app.on('activate', function () { if (mainWindow === null) { createWindow() } }); ``` 9. 在 package.json 中添加以下脚本: ``` "scripts": { "start": "webpack-dev-server --mode development", "build": "webpack --mode production && electron-builder", "electron": "electron ." } ``` 10. 启动项目: ``` npm start ``` 这将启动 Webpack Dev Server 并在浏览器中打开应用程序。在开发期间,每当更改 React 代码时,Webpack Dev Server 会自动重新编译代码并重新加载应用程序。 11. 打包应用程序: ``` npm run build ``` 这将使用 Webpack 和 electron-builder 打包应用程序。打包后的应用程序将在 dist 目录中生成。 12. 运行应用程序: ``` npm run electron ``` 这将启动 Electron 并加载打包后的应用程序。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值