Web前端技术开发桌面应用的方式 - CEF：用 Chromium&Webkit 来呈现 web 页面，是客户端里面嵌浏览器，浏览器里面跑网页。 - heX：基于CEF，内部整合了开源项目 Chromium 及 node.js。 - nw：基于Chromium 和 node.js，利用 web 方式开发跨平台桌面应用的平台技术。 - electron：底层也是基于Chromium 和 node.js。 - 等等。。。 ## 案例实操electron electron 是 github 开发的，用来开发桌面应用的一款前端框架 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R1cA6MYa-1600918604614)(imgkr.cn-bj.ufileos.com/5dcb1686-18…)] ### 开发环境 #### 安装 node.js nodejs下载地址 为了避免网络问题对 Node 工作时的影响，我们安装国内的 node 镜像 cnpm。 npm install -g cnpm --registry=https://registry.npm.taobao.org #### 安装 electron npm install --save-dev electron 或者全局安装 npm install -g electron ### 开发工具 VSCode 其实 vscode 就是 electron 开发的 ### 开发一个简易的 electron Electron 应用使用 JavaScript 开发，其工作原理和方法与 Node.js 开发相同。 electron 模块包含了 Electron 提供的所有 API 和功能，引入方法和普通 Node.js 模块一样： javascript const electron = require('electron') electron 模块所提供的功能都是通过命名空间暴露出来的。 比如说： electron.app负责管理 Electron 应用程序的生命周期， electron.BrowserWindow类负责创建窗口。下面是一个简单的main.js文件，它将在应用程序准备就绪后打开一个窗口： javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载index.html文件 win.loadFile('index.html') } app.whenReady().then(createWindow) 创建你想展示的 index.html： html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag --> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> </head> <body> <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html> ### 启动 我们在package.json中已经写好了启动命令，所以这里直接用 node 启动命令npm start就可以了，如果没有配，也可以用electron .命令启动。 ### 主进程和渲染进程 我们可以理解package.json中定义的入口文件就是主进程，那一般一个程序只有一个主进程，而我们可以利用一个主进程，打开多个子窗口。 由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 web 页面运行在它自己的渲染进程中，也就是我们说的渲染进程。 也就是说主进程控制渲染进程，一个主进程可以控制多个渲染进程。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QiEP5ffp-1600918604621)(imgkr.cn-bj.ufileos.com/5dcb1686-18…)] 您应当在 main.js 中创建窗口，并处理程序中可能遇到的所有系统事件。下面我们将完善上述例子，添加以下功能：打开开发者工具、处理窗口关闭事件、在 macOS 用户点击 dock 上图标时重建窗口，添加后，main. js 就像下面这样： javascript 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() } app.whenReady().then(createWindow) // 当所有窗口都关闭时触发此事件. 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 导入。 ### git 上面的 demo 示例 shell # 克隆这仓库 git clone https://github.com/electron/electron-quick-start # 进入仓库 cd electron-quick-start # 安装依赖库 npm install # 运行应用 npm start ### electron-forge 构建项目 shell # 全局安装electron-forge npm install electron-forge -g #用electron-forge初始化一个项目 electron-forge init demo02 # 进入到项目目录 cd demo02 #启动项目 npm start ## 扩展开发桌面百度 ### 主进程代码 我们创建了主进程对象 win 后，让它直接加载百度的地址。 js const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 let win = new BrowserWindow({ width: 800, height: 800, webPreferences: { nodeIntegration: true } }) // 加载index.html文件 // win.loadFile('index.html') win.loadURL("http://www.baidu.com") } app.whenReady().then(createWindow) ### 打包发布 我们希望使用electron-packager对应用进行打包发布，electron-packager的安装方式如下： shell #下载electron-packager打包插件 npm install electron-packager -g #开始打包 electron-packager ./ demo01 --win --out ./ --arch=x64 --app-version=0.0.1 --electron-version=8.2.5 我们还可以进一步打包成可执行文件 shell #下载windows系统可执行文件打包插件 npm install -g electron-installer-windows #开始打包 electron-installer-windows --src demo01-win32-x64 --dest ./ o01 --win --out ./ --arch=x64 --app-version=0.0.1 --electron-version=8.2.5 我们还可以进一步打包成可执行文件shell #下载windows系统可执行文件打包插件 npm install -g electron-installer-windows #开始打包 electron-installer-windows --src demo01-win32-x64 --dest ./ ```
npm install -g cnpm --registry=https://registry.npm.taobao.org #### 安装 electron npm install --save-dev electron 或者全局安装 npm install -g electron ### 开发工具 VSCode 其实 vscode 就是 electron 开发的 ### 开发一个简易的 electron Electron 应用使用 JavaScript 开发，其工作原理和方法与 Node.js 开发相同。 electron 模块包含了 Electron 提供的所有 API 和功能，引入方法和普通 Node.js 模块一样： javascript const electron = require('electron') electron 模块所提供的功能都是通过命名空间暴露出来的。 比如说： electron.app负责管理 Electron 应用程序的生命周期， electron.BrowserWindow类负责创建窗口。下面是一个简单的main.js文件，它将在应用程序准备就绪后打开一个窗口： javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载index.html文件 win.loadFile('index.html') } app.whenReady().then(createWindow) 创建你想展示的 index.html： html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag --> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> </head> <body> <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html> ### 启动 我们在package.json中已经写好了启动命令，所以这里直接用 node 启动命令npm start就可以了，如果没有配，也可以用electron .命令启动。 ### 主进程和渲染进程 我们可以理解package.json中定义的入口文件就是主进程，那一般一个程序只有一个主进程，而我们可以利用一个主进程，打开多个子窗口。 由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 web 页面运行在它自己的渲染进程中，也就是我们说的渲染进程。 也就是说主进程控制渲染进程，一个主进程可以控制多个渲染进程。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QiEP5ffp-1600918604621)(imgkr.cn-bj.ufileos.com/5dcb1686-18…)] 您应当在 main.js 中创建窗口，并处理程序中可能遇到的所有系统事件。下面我们将完善上述例子，添加以下功能：打开开发者工具、处理窗口关闭事件、在 macOS 用户点击 dock 上图标时重建窗口，添加后，main. js 就像下面这样： javascript 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() } app.whenReady().then(createWindow) // 当所有窗口都关闭时触发此事件. 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 导入。 ### git 上面的 demo 示例 shell # 克隆这仓库 git clone https://github.com/electron/electron-quick-start # 进入仓库 cd electron-quick-start # 安装依赖库 npm install # 运行应用 npm start ### electron-forge 构建项目 shell # 全局安装electron-forge npm install electron-forge -g #用electron-forge初始化一个项目 electron-forge init demo02 # 进入到项目目录 cd demo02 #启动项目 npm start ## 扩展需要视频配套文档或更多资料+我们程序员小姐姐v：lezijie007（加好友时备注：b站-LT，不备注拒绝添加哟）
