pc网页端调起客户端应用的那些事--electron

最新推荐文章于 2024-08-23 16:10:04 发布

Deng冬

最新推荐文章于 2024-08-23 16:10:04 发布

阅读量1w

点赞数 6

分类专栏： electron 前端文章标签： electron 调起客户端前端 js

本文链接：https://blog.youkuaiyun.com/dengdongxia/article/details/105906975

版权

Date: 2020.04.11

前言

在当下大前端的趋势之下，我还是跟随大流跳入了electron 开发的坑。不过这个也让我不再局限于网页业务的开发，并对大前端所代表的的内容有了新的认识。如果是在去年听到大前端这个词，我也只是只知其名不懂其义。

为了开发客户端的新业务，这三个月我接触了很多新知识，从基本的业务开发，electron 的构建配置和打包，针对 mac 应用的签名，公证和盖章, pc 客户端的ota升级，再到 jenkins 自动化构建配置，CI集成，再到现在的pc网页端调起客户端应用等业务。这些内容提高了还是前端切图仔的我的眼界【捂脸.jpeg】

不过，这个三个月一直忙于业务开发，学到了很多内容，一直没有进行过总结，这个让我觉得很害怕，害怕学到的新知识会被忘掉，因此，今天还是赶紧针对这些知识点做一下部分总结。今天先整理一下pc网页端调起客户端应用的知识点。

正文

背景：今天要讨论的是在网页端打开客户端页面的功能，也许大家比较少接触过在 pc 端调起 pc 客户端的应用的功能；但是在移动端网页调起手机应用的操作，大家或多或少有接触过；其实无论在 pc 还是网页；它们实现调起客户端的原理都是类似的。接下来我会分享一下 pc 网端调起 eletron 客户端的那些事。

part 1: 如何在浏览器调起基于electron 开发的应用（原理）

基于自定义的伪协议(URL Scheme 协议)，实现应用的调起

URL Scheme 协议【理解为用于实现在浏览器跳转应用的协议就可以啦】

mac

配置 URL Schemes，往info.plist文件里配置好scheme。

Mac os上浏览器启动本地app主要是通过注册 URL Schemes，每个打包好的app文件中都会存在一个info.plist文件；

mac 用户可以尝试在配置了URL Schemes的应用中，查看已经安装好的应用的 URL Schemes 配置，步骤如下：

在应用程序中，找到对应的应用
右键显示包内容
打开 contents 文件
点击查看 Info.plist 找到 URL types – URL Schemes；
再通过浏览器打开输入该协议即可实现在浏览器调起应用。

以 xcode 为例：
6. 打开 xcode 的 Info.plist 文件。可看到其中一个 URL Schemes 为 xcode.
在这里插入图片描述
7. 再打开浏览器，在地址栏输入xcode://，即可调起 xcode 应用。

window

window 的调起类似；

只不过不是往info.plist文件里配置scheme，而是通过往注册表的 HKCR (HKEY_CALSSES_ROOT) 目录下添加一条记录来完成该协议的注册。

示例：在注册表的HKEY_CALSSES_ROOT目录下，添加一个xcode 字段，并将值指向 xcode 的 exe 包的路径；即可实现如上面 mac 的方式在浏览器调起应用。

暂时没有window 电脑在身边，使用了网上一张图作为例子，侵删
在这里插入图片描述

part 2: 那么如何在开发应用的时候定义好协议呢（怎么做）

其实关于 electron 应用协议的注册，electron 已经有提供相应的 api 啦（app.setAsDefaultProtocolClient），我们可以直接使用。在进行 app 的相关事件监听和处理时，同时进行协议的注册。

// 示例1：比如说想通过在浏览器输入 “协议：//”，就可以实现调起该应用，则实现如下
app.setAsDefaultProtocolClient("你的协议");

// 示例2：比如说想通过在浏览器输入 “xcode：//”，按照下面进行协议的注册，就可以实现调起该应用
app.setAsDefaultProtocolClient("xcode");

另外，还需要在 package.json 的 build 字段中的 protocols 对象进行 schemes 配置。

在mac中，该配置字段主要是用在将 schemes的值打包进 Info.plist 文件的URL Schemes。【如果没有进行这个配置，在第一次安装应用但未启动，直接通过网页端调起该应用，好像是无效的，除非已手动打开过一次该应用，主要是因为app.setAsDefaultProtocolClient(“你的协议”)这个操作是写在主进程里面，需要执行一遍应用的逻辑，即启动过应用，才能完成该协议的注册】。

window 只需要使用 app.setAsDefaultProtocolClient 在注册表进行注册即可。