Table of contents
1. Implementation
Using URL Protocol to achieve
an example showing the method of pulling up WeChat on the web
1. Write the registry
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"
Copy the above registry code, save it as 注册表.reg(name it whatever you like)
, then double-click to execute it and write it to the registry of your computer, click Yes
Check the registry, and you can see this, which means that the registry has been added successfully:
It is recommended to add this registry to the package when your own program is packaged, write to the registry when the program is installed, and delete the registry when the program is uninstalled.
2. Front-end code
<!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>
But this method cannot determine whether there is an agreement to open the program on our computer
2. Can detect whether the program is installed, and pull up
If we add the registry in the previous section to the package when our own program is packaged, it will be written into the registry when the program is installed, and the registry will be deleted when the program is uninstalled.
Use protocolcheck.jscan detect whether the computer has the registry we wrote, so as to determine whether we have installed this program.
protocolcheck.js(Download address: https://github.com/ismailhabib/custom-protocol-detection/blob/master/protocolcheck.js )
The front-end code is rewritten as:
<!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>
Click the button "Detect and pull up the client" When our program exists, the client can be pulled up as in the previous section:
When our program does not exist, we can prompt the user that the client is not installed, and our front-end can add logic to let the user download the client
Code address: https://gitee.com/jie-xio/web_samples/tree/master/PullUpClient