Electron
使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序
相关链接
目录结构
- main.js 入口文件
- renderer.js 目前未知
- preload.js 编写逻辑
- index.html 编写UI
Electron Fiddle
你可以使用 Electron Fiddle 创建并运行小段 Electron 程序，从一个简单的模板开始，随心所欲地挥洒你的创意，选择一个 Electron 版本欣赏运行效果。最后，你可以将其下载保存，或推送 GitHub Gist 上，所有人都可以输入网址运行你的 Fiddle。
scripts": {
"package": "electron-packager ./ zhihu --win --out zhihu --arch=x64
--version 1.3.4 --overwrite --ignore=node_modules"
}参数说明
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>-
location of project：应用目录;
-
name of project：应用名称;
-
platform：要打包的平台;
-
architecture：x86 or x64架构;
-
electron version：electron 版本(不是应用版本);
-
optional options：其它选项;
npm run-script package从零开始的electron开发-项目搭建 - 陌路凡歌 electron 前端的技术分享与个人见解
https://xuxin123.com/%e4%bb%8e%e9%9b%b6%e5%bc%80%e5%a7%8b%e7%9a%84electron%e5%bc%80%e5%8f%91-%e9%a1%b9%e7%9b%ae%e6%90%ad%e5%bb%ba/?unapproved=887&moderation-hash=17470a4a57fb8ea7ea0c8595d3dfadd8#comment-887
快速入门
快速入门
# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
$ cd electron-quick-start
# 安装依赖并运行
$ yarn install && yarn startQuick start
https://www.electronjs.org/docs/tutorial/quick-start
因为 Electron 将 Node.js 嵌入到其二进制文件中，你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。
任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程(稍后详细介绍)。
执行期间，Electron 将依据应用中 package.json配置下main字段中配置的值查找此文件
mkdir my-electron-app && cd my-electron-app
npm init
# package.json 文件部分必要参数
# entry point 应为 main.js.
# author 与 description 可为任意值，但对于应用打包是必填项。
npm install --save-dev electron
# package.json 文件 添加脚本指令
#{
# "scripts": {
# "start": "electron ."
# }
#}
npm startmain.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
//The __dirname string points to the path of the currently executing script (in this case, your project's root folder).
// The path.join API joins multiple path segments together, creating a combined path string that works across all platforms.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
程序打包
#yarn install --save-dev @electron-forge/cli
yarn add @electron-forge/cli --dev
yarn electron-forge import
npm run makenode-gyp
https://github.com/nodejs/node-gyp#on-windows
node-gyp is a cross-platform command-line tool written in Node.js for compiling native addon modules for Node.js. It contains a vendored copy of the gyp-next project that was previously used by the Chromium team, extended to support the development of Node.js native addons.
发表评论