【Electron】酷家乐客户端开发实践分享 — 入坑篇

jay_tian 发布于2019-08-02 15:16 / 661人阅读

摘要：系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。

作者：钟离，酷家乐PC客户端负责人
原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-duan-kai-fa-shi-jian-fen-xiang-ru-keng-zhi-nan/
酷家乐客户端：下载地址 https://www.kujiale.com/activity/136
文章背景：在酷家乐客户端在V12改版成功后，我们积累了许多的宝贵的经验和最佳实践。前端社区里关于Electron知识相对较少，因此希望将这些内容以系列文章的形式分享出来。
系列文章：

【Electron】酷家乐客户端开发实践分享 — 软件自动更新

【Electron】酷家乐客户端开发实践分享 — 浏览器启动客户端

【Electron】酷家乐客户端开发实践分享 — 进程通信

【Electron】酷家乐客户端开发实践分享 — 下载管理器

不定期更新...

本文的初衷

Electron所使用的技术栈（JavaScript、NodeJs、HTML、CSS）和web前端工程师完美契合。于是，越来越多的前端工程师，用Electron来开发桌面客户端的开发，我也是其中的一员。

虽然Electron技术栈对前端工程师比较友好，但是概念较多，和web前端开发还是有很大差别的，写个入坑指南希望能帮助读者快速上手Electron。

了解客户端

首先抛出一个问题，web应用是桌面客户端吗？显然不是。那么，问题来了，什么样的软件才是桌面客户端呢？我们既然要从web前端转到客户端开发，那么就需要了解客户端，就像我们当初了解web应用一样。

回到刚刚那个问题，桌面客户端有两个重要的特点：

独立运行于操作系统上（桌面客户端只是PC，那么限定windows、MacOS、linux这几个主流PC操作系统）

有自己的GUI（用户图形界面 graphical user interface）

web应用有自己的GUI，必须在浏览器中执行，因此不是桌面客户端。

浏览器能直接运行在操作系统上，而且有自己的GUI，因此浏览器是桌面客户端。

Electron的能力

在刚刚接触Electorn的时候，文档看的我是眼花缭乱。在某个加班的深夜，我不禁对天长叹：这个东西到底能干啥？

这东西能干啥？在经历了Electron的反复摩擦之后，我总结了Electron的几个关键能力：

NodeJs全部能力，与操作系统交互

operation system 与操作系统相关的操作

HTTP(s)、HTTP2

process、child process 进程相关

file system 文件系统

...省略

Electron提供的基础模块，主要与操作系统交互

app 主进程声明周期管理，控制MacOS任务栏dock、windows任务栏taskbar

BrowserWindow 控制窗口，在MacOS和windows中窗口非常重要！

screen 操作用户显示器

globalShortcut 系统级别快捷键

...省略

Chromium提供的能力，主要提供GUI图形界面

解析HTML、CSS、JS

ajax请求

cookie、localstorage

...省略

能力越大，责任越大

如果用户安装了我们的桌面客户端，那么我们的软件在用户电脑上运行时，就有了非常大的权利，这是把双刃剑。

用户选择了我们的软件，我们也要对用户的电脑负责。能力越大，责任也就越大：

1.注意内存的占用，特别是chromium，简直是内存怪兽。可以通过os来获取用户电脑的配置，然后根据电脑的配置和可用资源，来制定合理的策略。

为软件增加代码签名，提升安全性

谨慎操作注册表、用户敏感目录

一旦被贴上【流氓软件】、【不好用】的标签，就很难再改变用户的印象了。

主进程、渲染进程

生命周期

主进程：从整个应用启动到结束，该进程一直存在。主进程只有一个。

渲染进程：主进程可用创建/销毁渲染进程，因此渲染进程的生命周期是不固定的。渲染进程可以有多个。

执行环境

在Electron的API文档中，会在文档顶部标识该模块在哪个进程可用，例如：ipcRenderer

职责划分

主进程	渲染进程
控制app的生命周期，为app注册关键事件	解析HTML，渲染窗口内容
阻止一些默认行为，例如webContents的跳转、download事件的默认行为等等（在渲染进程无法做到）	处理窗口的交互逻辑
创建BrowserWindow，也就是渲染进程。合理设置窗口的参数，控制窗口的生命周期（例如何时销毁窗口），决定BrowserWindow加载何处的HTML	与主进程通信，实现高级交互

窗口、前端资源

我们回顾一下刚刚讲到的执行流程，其中有一个有趣的点，就是Electron的窗口会加载一个HTML来渲染窗口的内容。

HTML，以及HTML加载的css、js文件，统称为前端资源

如果不加载HTML的，客户端还能用吗？不妨来试试

    // main process
    const win1 = new BrowserWindow();
    const win2 = new BrowserWindow();

上述代码在主进程中执行，创建了两个窗口，窗口并没加载HTML文件。但是窗口却是真实存在的，带有系统标准的控制栏，可拖动，是货真价实的系统窗口！

我们可以发现，前端资源和窗口是分离的。由主进程创建的的窗口（BrowserWindow），既是一个系统原生窗口，同时也是一个加载&渲染前端资源的容器

窗口通常会通过file协议和http(s)协议来加载前端资源，接下来我们看看这两种方式的区别。

通过file协议加载HTML

在Electron的官方入门例子中，就是通过file协议来加载HTML的

通过file协议加载HTML，无论有没有网络，都可以加载到HTML文件，这是file协议核心优势。缺点也比较明显：

如果页面资源要更新，那么只能通过发版来解决（如果你用webview，那么webview的内容就可以自动更新，不过webview也需要有网络才能加载）

在file协议下，无法通过ajax来请求数据（协议不同），只能通过NodeJs的http(s)模块来发起网络请求

通过http协议加载HTML

通过http协议加载HTML，优点是可以随时通过web页面的部署，更新渲染进程的资源，并且在https协议下，你可以在页面中使用前端熟悉的ajax请求来获取数据。

当然，缺点也比较明显：

没有网络，并且在你没有做HTML的缓存时，你的窗口内容无法加载

必须通过https来加载，保证页面内容的安全性

代码示例

方便读者更好理解上文的内容，写了一个小demo，源代码地址 https://github.com/littlecold233/electron-demo，例子有以下特点：

创建主窗口，阻止关闭主窗口关闭的默认事件，不销毁窗口。（大部分客户端的主窗口，关闭主窗口的时候，实际上是隐藏了该窗口，例如QQ、微信）

应用退出时，会尝试关闭所有窗口，再退出应用。如果主窗口的关闭行为默认事件被阻止，那么会导致主窗口无法关闭，整个应用无法退出。因此使用forceQuit这个变量来控制。

使用http或者file协议加载窗口前端资源（例子中，默认加载的是微信）

const { app, BrowserWindow } = require("electron")

async function main () {
  await app.whenReady();

  let forceQuit = false;

  const majorWindow = new BrowserWindow({
    title: "主窗口",
    width: 1000,
    height: 750,
    minWidth: 1000,
    minHeight: 750,
    backgroundColor: "#f2f2f2",
  }); // 主窗口

  // 阻止标题更新
  majorWindow.on("page-title-updated", (e) => {
    e.preventDefault();
  });

  majorWindow.on("close", (e) => {
      // 用户希望退出的时候，不作处理，默认会销毁这个窗口
      if (forceQuit) return;
      e.preventDefault();

      // macOS全屏的处理
      if (majorWindow.isFullScreen()) {
        majorWindow.once("leave-full-screen", () => {
          majorWindow.hide();
        });
        majorWindow.setFullScreen(false);
      } else {
        majorWindow.hide();  // 隐藏窗口
      }
  });

  // 点击dock打开主窗口
  app.on("activate", () => {
    majorWindow.show();
  });

  // 用户使用cmd + Q、代码中调用app.quit等情况
  // 此时用户希望能够退出应用，因此将forceQuit改为true
  app.on("before-quit", () => {
    forceQuit = true;
  });
  
  app.dock.setIcon("./img/icon.png"); // 在app打包后，这一句代码其实是不需要的

  majorWindow.loadURL("https://wx.qq.com"); // http协议加载前端资源，随便加载一个微信试试
  // majorWindow.loadURL("file://index.html"); // file协议加载前端资源

}

main();

在本地跑一下这个例子

最后

欢迎大家在评论区讨论，技术交流 & 内推 -> zhongli@qunhemail.com

混合云私有云入坑篇酷家乐云服务器在哪里 webrtc结合electron桌面分享开发实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54017.html

【Electron】酷家乐客户端开发实践分享 — 入坑篇

摘要：系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

TwIStOy 2019-08-23 18:05 评论0 收藏0
【Electron】酷家乐客户端开发实践分享 — 软件自动更新

摘要：作者钟离，酷家乐客户端负责人原文地址酷家乐客户端下载地址文章背景在酷家乐客户端在改版成功后，我们积累了许多的宝贵的经验和最佳实践。用户在电脑上安装客户端，实际上会将客户端代码文件持久储存到本机。通常我们会在软件启动时检查更新。作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/electron-autoupdate/酷家乐客户端：下载地址...

phpmatt 2019-08-02 15:16 评论0 收藏0
【Electron】酷家乐客户端开发实践分享 — 软件自动更新

摘要：作者钟离，酷家乐客户端负责人原文地址酷家乐客户端下载地址文章背景在酷家乐客户端在改版成功后，我们积累了许多的宝贵的经验和最佳实践。用户在电脑上安装客户端，实际上会将客户端代码文件持久储存到本机。通常我们会在软件启动时检查更新。作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/electron-autoupdate/酷家乐客户端：下载地址...

leiyi 2019-08-23 18:05 评论0 收藏0
【Electron】酷家乐客户端开发实践分享 — 浏览器启动客户端

摘要：作者钟离，酷家乐客户端负责人原文地址酷家乐客户端下载地址文章背景在酷家乐客户端在改版成功后，我们积累了许多的宝贵的经验和最佳实践。钟离可以注册多个协议接收参数协议注册完毕之后，我们已经可以在浏览器中，通过访问自定义协议来启动客户端了。作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/browser-to-client/酷家乐客户端：下载...

Cciradih 2019-08-02 15:19 评论0 收藏0
【Electron】酷家乐客户端开发实践分享 — 浏览器启动客户端

摘要：作者钟离，酷家乐客户端负责人原文地址酷家乐客户端下载地址文章背景在酷家乐客户端在改版成功后，我们积累了许多的宝贵的经验和最佳实践。钟离可以注册多个协议接收参数协议注册完毕之后，我们已经可以在浏览器中，通过访问自定义协议来启动客户端了。作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/browser-to-client/酷家乐客户端：下载...

刘德刚 2019-08-23 18:05 评论0 收藏0