electron入门 1(环境搭建)[ Windows环境 ]

1、安装nodejs

2、安装yarn(替代nodejs自带的npm)

node install -g yarn

3、新建一个文件夹,命名为test

4、在上一步创建的文件夹目录下打开终端,创建nodejs项目,并且根据提示输入项目信息:

{ name:test version:1.0.0 entry point:index.js license:MIT }

5、将安装源切换为国内资源,安装electron依赖包:选择版本7.2.4

yarn config set ELECTRON_MIRROR https://cdn.npm.taobao.org/dist/electron yarn add electron@7.2.4 --platform=win64

6、如果上一步安装失败,也可以手动修改package.json文件

{ "name": "test", "version": "1.0.0", "main": "index.js", "author": "", "license": "MIT", "dependencies": { "electron": "^7.2.4", "electron-log": "^2.2.14", "electron-settings": "^3.0.7", "electron-shortcut-normalizer": "^1.0.0", "glob": "^7.1.0", "highlight.js": "^10.4.1", "update-electron-app": "^1.1.1" } } 

然后执行命令

npm install

至此,在文件夹test下即可看到依赖包文件夹node_modules

7、在package中增加启动入口:

"scripts": {"start":"electron ./index.js"}

8、在test文件夹目录下创建文件index.js,并输入如下代码:

// / // electron const {app, BrowserWindow} = require('electron'); // 保持对window对象的全局引用,如果不这么做的话,当JavaScript对象被 // 垃圾回收的时候,window对象将会自动的关闭 let win; function createWindow() { // 创建浏览器窗口。 win = new BrowserWindow({ width: 1200, height: 600, webPreferences: { nodeIntegration: true, // 集成node环境 enableRemoteModule: true }, }); // 加载index.html文件 win.loadFile('./index.html'); win.on('closed', () => { 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(); } }); // 在这个文件中,你可以续写应用剩下主进程代码。 // 也可以拆分成几个文件,然后用 require 导入。 // 

9、在test文件夹目录下创建文件index.html,并输入如下代码:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> <span>We are using node Chrome and Electron</span> </body> </html>

10、执行命令

yarn start

11、如下是运行成功的界面

原文链接:https://blog.csdn.net/h8062651/article/details/122731032?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165934461816782246452974%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165934461816782246452974&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-4-122731032-null-null.nonecase&utm_term=%E6%90%AD%E5%BB%BAcdn

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/6017

(0)
上一篇 2022年10月7日
下一篇 2022年10月7日

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml