前端拉起Windows客户端

一、 实现

利用URL Protocol实现
示例展示Web端拉起微信的方法

1. 编写注册表

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\MyWeiXin]
@="微信"
"URL Protocol"="C:\\Program Files (x86)\\Tencent\\WeChat\\WeChat.exe"

[HKEY_CLASSES_ROOT\MyWeiXin\shell]

[HKEY_CLASSES_ROOT\MyWeiXin\shell\open]

[HKEY_CLASSES_ROOT\MyWeiXin\shell\open\command]
@="C:\\Program Files (x86)\\Tencent\\WeChat\\WeChat.exe"

在这里插入图片描述

把上面的注册表代码拷贝出来,存为 注册表.reg (命名随便)
然后双击就能执行写入到你电脑的注册表了,点击 是

在这里插入图片描述

查看注册表,能看到这个,就是注册表添加成功了:
在这里插入图片描述



建议,在自己的程序打包时把这个注册表添加到包里面,程序安装时写入注册表,程序卸载时删除注册表



2. 前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>
<body>
    <a href="MyWeiXin://open">只能拉起客户端</a>
</body>

在这里插入图片描述
在这里插入图片描述

但是这个方法不能判断我们的电脑上是否存在打开程序的协议




二、 能检测程序是否安装,并拉起

如果在我们自己的程序打包时,把上一节的那个注册表添加到包里面,程序安装时写入注册表,程序卸载时删除注册表。
使用 protocolcheck.js 能检测电脑是否有我们写入的注册表,从而能判断我们是否安装了此款程序。

protocolcheck.js (下载地址:https://github.com/ismailhabib/custom-protocol-detection/blob/master/protocolcheck.js

前端代码改写为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>

</head>


<body>
    
    <a href="MyWeiXin://open">只能拉起客户端</a>

    <br/>
    <br/>

    <input type="button" value="检测并拉起客户端" onclick="checkAndOpenClient()"/>

</body>


<script src="protocolcheck.js"></script>

<script>

    function checkAndOpenClient(){
    
    
        let protocalUrl = 'MyWeiXin://open'
        protocolCheck(protocalUrl, () => {
    
    
            alert('未安装客户端');
        }, () => {
    
    
            console.log('检测到客户端,并拉起它')
        });
    }

</script>

</html>

点击按钮 “检测并拉起客户端” 当我们的程序存在时,和上一节一样能拉起客户端:
在这里插入图片描述

当我们的程序不存在时, 可以提示用户未安装客户端,我们前端就可以添加逻辑,让用户去下载客户端
在这里插入图片描述





代码地址:https://gitee.com/jie-xio/web_samples/tree/master/PullUpClient

猜你喜欢

转载自blog.csdn.net/Jay_Xio/article/details/129900244
今日推荐