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

最新推荐文章于 2024-05-20 14:29:27 发布

极樂 .

最新推荐文章于 2024-05-20 14:29:27 发布

阅读量189

点赞数

文章标签： vue java python js javascript

本文链接：https://blog.csdn.net/weixin_50847753/article/details/108770691

版权

本文介绍了如何使用Web前端技术，特别是Electron框架，来开发桌面应用程序。内容包括 Electron 的基本概念、开发环境搭建、主进程与渲染进程的区分，以及通过electron-forge构建和发布项目的步骤。通过案例展示了开发一个简易Electron应用和扩展开发桌面版百度的过程。

摘要由CSDN通过智能技术生成

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)(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.h