zoukankan      html  css  js  c++  java
  • 如何用Web前端技术就能开发出桌面应用程序?

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

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

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

    案例实操~electron

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-11imKxbl-1599724317910)(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({
         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 页面运行在它自己的渲染进程中,也就是我们说的渲染进程。

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C1eFkJGA-1599724317916)(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({
         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({
         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

    
    我们还可以进一步打包成可执行文件
    
    ```shell
    #下载windows系统可执行文件打包插件
    npm install -g electron-installer-windows
    #开始打包
    electron-installer-windows --src demo01-win32-x64 --dest ./
    
  • 相关阅读:
    QFramework 使用指南 2020(二):下载与版本介绍
    QFramework 使用指南 2020 (一): 概述
    Unity 游戏框架搭建 2018 (二) 单例的模板与最佳实践
    Unity 游戏框架搭建 2018 (一) 架构、框架与 QFramework 简介
    Unity 游戏框架搭建 2017 (二十三) 重构小工具 Platform
    Unity 游戏框架搭建 2017 (二十二) 简易引用计数器
    Unity 游戏框架搭建 2017 (二十一) 使用对象池时的一些细节
    你确定你会写 Dockerfile 吗?
    小白学 Python 爬虫(8):网页基础
    老司机大型车祸现场
  • 原文地址:https://www.cnblogs.com/lezijie/p/13646234.html
Copyright © 2011-2022 走看看