Electron 基础学习(1)
背景
-
Electron
是由Github
开发的开源框架; -
允许开发者使用
Web
技术构建跨平台的桌面应用。 -
构成:
Chromium
+Node.js
+Native Api
Chromium
为Electron
提供强大的UI,并且不必考虑兼容性;Node.js
让Electron
有了底层的操作能力,比如文件读写等。还可以使用大量的npm
包进行开发;Native API
让Electron有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘这些。
环境构建
-
下载并安装
Node.js
,官网下载链接 -
安装
electron
,这里可能要采取科学上网的方式进行下载npm install electron
-
校验
// 查看版本 npx electron -v // 启动试试 ./node_modules/.bin/electron
创建应用
-
目录结构(基本内容)
index.html
main.js
package.json
-
main.js
:入口const {app, BrowserWindow} = require('electron') // 引入electron var mainWindow = null // 主窗口 app.on('ready', () => { // 设置应用启动事件 mainWindow = new BrowserWindow({width: 800, height: 800}) // 设置窗口大小 mainWindow.loadFile('./index.html') // 设置窗口显示HTML路径 mainWindow.on('closed', () => { // 设置窗口关闭后事件 mainWindow = null }) })
-
index.html
:显示任意内容的网页 -
pageage.json
:(配置启动方式){ "name": "code", "version": "1.0.0", "description": "study Electron", "main": "main.js", // 这里需要配置成你的程序入口,不然默认启动index.js "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron ." // 这里需要添加这句,使用electron启动该应用,. 是对入口文件的简述 } }
最后使用
npm start
启动,就可以看到窗口程序了!
使用node.js
-
配置
BrowserWindow
,核心代码如下// main.js // 修改BrowserWindow参数选项 app.on('ready', () => { mainWindow = new BrowserWindow({ width: 600, height: 400, webPreferences: { nodeIntegration: true, // 是否集成node.js,默认为false。 contextIsolation: false // 也需要配置,这个暂时不知道什么原因,12.0.0版本的问题 } }) mainWindow.loadFile('./index.html') mainWindow.on('closed', () => { mainWindow = null }) })
-
修改
index.html
,核心代码如下<html> <body> <button id="btn">点我啊</button> <div id="box"></div> <script src="./readFile.js"></script> </body> </html>
-
创建
test.txt
,内容随意填写 -
创建
readFile.js
,代码如下// 引入node.js的fs模块 const { readFile } = require('fs') window.onload = function() { let btn = this.document.querySelector('#btn') let box = this.document.querySelector('#box') btn.onclick = () => { // 需要注意的是,这里的路径是相对于入口文件(main.js) readFile('./test.txt', (err, data) => { if (err) { box.innerHTML = err } else { box.innerHTML = data } }) } }
-
最后启动项目,点击按钮,就会看见在
test.txt
中的内容被填充到窗口上了。
Remote
类似于打开新窗口的功能(不关闭主进程窗口)。
-
配置
BrowserWindow
,核心代码如下// main.js // 修改BrowserWindow参数选项 app.on('ready', () => { mainWindow = new BrowserWindow({ width: 600, height: 400, webPreferences: { // 这句必须要有,否则无法创建新窗口对象 enableRemoteModule: true } }) mainWindow.loadFile('./index.html') mainWindow.on('closed', () => { mainWindow = null }) })
-
创建
remote.html
,核心代码如下<html> <body> <p> 这里是使用remote开启的新窗口 </p> </body> </html>
-
创建
remote.js
,代码如下const btn = this.document.querySelector('#btn') const BrowserWindow = require('electron').remote.BrowserWindow window.onload = function() { btn.onclick = () => { let win = new BrowserWindow({width: 300, height: 200}) win.loadFile('.remote.html') win.on('closed', () => { win = null }) } }
-
修改
index.html
,核心代码如下<html> <body> <button id="btn">点我啊</button> <div id="box"></div> <!-- 这里引入自定义的remote.js --> <script src="./readFile.js"></script> </body> </html>
-
在启动主进程后,点击按钮就能打开新的窗口了。
菜单创建与事件绑定
-
创建
menu.js
,代码如下const { Menu, BrowserWindow } = require('electron') // 创建菜单对应结构数组 // 数组每一项对应一个菜单项 const menuList = [ { // label是菜单项名 label: '文件', // submenu是菜单项子项 submenu: [ { label: '新建文件', // 绑定快捷键 accelerator: 'ctrl+n', // 设置子项click事件 click: () => { let win = new BrowserWindow({ width: 300, height: 200 }) // 这里的menu.html纯测试用,随便创建一个页面就ok win.loadFile('./menu.html') win.on('closed', () => { win = null }) } }, { label: '新建窗口' } ] } ]
-
修改
main.js
,核心代码如下const menu = require('./static/js/menu.js') app.on('ready', () => { // 引入meun,这里其实可以不写,只要引入该js文件就ok menu mainWindow = new BrowserWindow({ width: 600, height: 400, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true } }) mainWindow.loadFile('./static/html/index.html') mainWindow.on('closed', () => { mainWindow = null }) })
-
启动之后就能看到菜单项变化了,并且可以点击
今日总结
今天也是我第一天学习electron
,文章之后将会陆续更新。文章可能还有什么不足或者错误的地方,望大家指出,共勉,加油!!!