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

40次阅读

共计 3638 个字符,预计需要花费 10 分钟才能阅读完成。

Web 前端技术开发桌面利用的形式

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

案例实操~electron

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

开发环境

装置 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

<!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 页面运行在它本人的渲染过程中,也就是咱们说的渲染过程。

也就是说主过程管制渲染过程,一个主过程能够管制多个渲染过程。

您该当在 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 ./ 

o01 –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 ./

正文完
 0