如何用Web前端技术就能开发出桌面应用程序?

Web前端技术开发桌面应用的方式

  • CEF:用 Chromium&Webkit 来呈现 web 页面,是客户端里面嵌浏览器,浏览器里面跑网页。
  • heX:基于CEF,内部整合了开源项目 Chromium 及 node.js。
  • nw:基于Chromium 和 node.js,利用 web 方式开发跨平台桌面应用的平台技术。
  • electron:底层也是基于Chromium 和 node.js。
  • 等等。。。

案例实操~electron

electron 是 github 开发的,用来开发桌面应用的一款前端框架

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gHQ4XC8M-1601368852810)(https://imgkr.cn-bj.ufileos.com/5dcb1686-18db-41c0-9ce1-064c21afe33f.png)]

开发环境

安装 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 模块一样:

const electron = require('electron')

electron 模块所提供的功能都是通过命名空间暴露出来的。 比如说: electron.app负责管理 Electron 应用程序的生命周期, electron.BrowserWindow类负责创建窗口。下面是一个简单的main.js文件,它将在应用程序准备就绪后打开一个窗口:

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



  
    
    Hello World!
    
    
  
  
    

Hello World!

We are using node , Chrome , and Electron .

启动

我们在package.json中已经写好了启动命令,所以这里直接用 node 启动命令npm start就可以了,如果没有配,也可以用electron .命令启动。

主进程和渲染进程

我们可以理解package.json中定义的入口文件就是主进程,那一般一个程序只有一个主进程,而我们可以利用一个主进程,打开多个子窗口。

由于 Electron 使用了 Chromium 来展示 web 页面,所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 web 页面运行在它自己的渲染进程中,也就是我们说的渲染进程。

也就是说主进程控制渲染进程,一个主进程可以控制多个渲染进程。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ve9EmdUW-1601368852812)(https://imgkr.cn-bj.ufileos.com/5dcb1686-18db-41c0-9ce1-064c21afe33f.png)]

您应当在 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()
}

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 示例

# 克隆这仓库
git clone https://github.com/electron/electron-quick-start
# 进入仓库
cd electron-quick-start
# 安装依赖库
npm install
# 运行应用
npm start

electron-forge 构建项目

# 全局安装electron-forge
npm install electron-forge -g

#用electron-forge初始化一个项目
electron-forge init demo02

# 进入到项目目录
cd demo02

#启动项目
npm start

扩展~开发桌面百度

主进程代码

我们创建了主进程对象 win 后,让它直接加载百度的地址。

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的安装方式如下:

#下载electron-packager打包插件
npm install electron-packager -g
#开始打包
electron-packager ./ demo01 --win --out ./ --arch=x64 --app-version=0.0.1 --electron-version=8.2.5

我们还可以进一步打包成可执行文件

#下载windows系统可执行文件打包插件
npm install -g electron-installer-windows
#开始打包
electron-installer-windows --src demo01-win32-x64 --dest ./

你可能感兴趣的:(如何用Web前端技术就能开发出桌面应用程序?)