1.对于Electron
Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。Electron通过将Chromium和Node.js合并到前端培训同一个运行时环境中,并将其打包为Mac,Windows和Linux零碎下的利用来实现这一目标。
为了放弃Electron的玲珑 (文件体积) 和可持续性开发 (以防依赖库和API的泛滥) ,Electron限度了所应用的外围我的项目的数量。比方Electron只用了Chromium的渲染库而不是其全副组件。这使得降级Chromium更加容易,但也意味着Electron短少了Google Chrome里的一些浏览器相干的个性。增加到Electron的新性能应该次要是原生 API。如果能够的话,一个性能应该尽可能的成为一个Node.js模块。
2.开发环境
能够应用原生的Node.js开发环境来开发Electron利用。为了打造一个Electron桌面程序的开发环境,你只须要装置好Node.js、npm、一个棘手的代码编辑器以及对你的操作系统命令行客户端有根本理解。咱们以比拟常见的windows开发环境(win7以上)为例:
首先,装置最新版本的node.js。举荐装置最新的长期反对的版本。在装置过程中的配置界面请勾选node.js runtime、npm package manager和add to path这三个选项。可通过以下命令来确认node和npm曾经装置实现。
3.打造一个简略的Electron利用
Electron 能够让你应用纯 JavaScript 调用丰盛的原生(操作系统) APIs 来发明桌面利用。你能够把它看作一个 Node. js 的变体,它专一于桌面利用而不是 Web 服务器端。这不意味着 Electron 是某个图形用户界面(GUI)库的 JavaScript 版本。相同,Electron 应用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 管制的,精简版的 Chromium 浏览器。
从开发的角度来看, Electron application 实质上是一个 Node. js 应用程序。与 Node.js 模块雷同,利用的入口是 package.json 文件。一个最根本的 Electron 利用一般来说会有如下的目录构造:
your-app/
├── package.json
├── main.js
└── index.html
为你的新Electron利用创立一个新的空文件夹。关上你的命令行工具,而后从该文件夹运行npm init
npm 会帮忙你创立一个根本的 package.json 文件。其中的 main 字段所示意的脚本为利用的启动脚本,它将会在主过程中执行。如下片段是一个 package.json 的示例:
{
“name”: “demo”,
“version”: “1.0.0”,
“description”: “test”,
“main”: “index.js”,
“scripts”: {
"test": "echo \"Error: no test specified\" && exit 1"
},
“author”: “”,
“license”: “ISC”
}
留神:如果 main 字段没有在 package.json 中呈现,那么 Electron 将会尝试加载 index.js 文件(就像 Node.js 本身那样)。如果你理论开发的是一个简略的 Node 利用,那么你须要增加一个 start 脚本来指引 node 去执行以后的 package,把这个 Node 利用转换成一个 Electron 利用也是非常简单的,咱们只不过是把 node 运行时替换成了 electron 运行时。
{
“name”: “demo”,
“version”: “1.0.0”,
“description”: “test”,
“main”: “index.js”,
“scripts”: {
"start": "electron ."
},
“author”: “”,
“license”: “ISC”}
4.开发一个简略的electron
Electron apps 应用JavaScript开发,其工作原理和办法与Node.js 开发雷同。electron模块蕴含了Electron提供的所有API和性能,引入办法和一般Node.js模块一样。
electron 模块所提供的性能都是通过命名空间裸露进去的。比如说:electron.app负责管理Electron 应用程序的生命周期, electron.BrowserWindow类负责创立窗口。上面是一个简略的main.js文件,它将在应用程序准备就绪后关上一个窗口。
您该当在 main.js 中创立窗口,并处理程序中可能遇到的所有零碎事件。上面咱们将欠缺上述例子,增加以下性能:关上开发者工具、解决窗口敞开事件、在macOS用户点击dock上图标时重建窗口,增加后,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()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// 局部 API 在 ready 事件触发后能力应用。
app.whenReady().then(createWindow)
// Quit when all windows are closed.
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()
}
})
// In this file you can include the rest of your app’s specific main process
// code. 也能够拆分成几个文件,而后用 require 导入。
5.启动利用
在创立并初始化实现 main.js、 index.html和package.json之后,您就能够在以后工程的根目录执行 npm start 命令来启动刚刚编写好的Electron程序了。
发表回复