JavaScript調起本地應用程序

以下內容，自定義部分我也還未經過實際驗證，酌情查看。

在瀏覽器中通過 JavaScript調起本地應用程序的一個可行方法就是 通過協議調起。

具體步驟就兩步：

1. 確定協議
2. 調用協議

確定協議

確定協議的方法要去注冊表中看。

window + s搜索regedit，打開 注冊表編輯器，然后再HKEY_CLASSES_ROOT下找。

以 微信 為例：可以在HKEY_CLASSES_ROOT項下找到weixin項，在weixin上右鍵導出注冊表，在編輯器(例如：vscdoe)中打開，可以看到以下內容：

Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\weixin]
@="weixinProtocol"
"URL Protocol"="weixinProtocol"[HKEY_CLASSES_ROOT\weixin\DefaultIcon]
@="C:\\Program Files (x86)\\Tencent\\WeChat\\WeChat.exe,1"[HKEY_CLASSES_ROOT\weixin\shell][HKEY_CLASSES_ROOT\weixin\shell\open][HKEY_CLASSES_ROOT\weixin\shell\open\command]
@="\"C:\\Program Files (x86)\\Tencent\\WeChat\\WeChat.exe\" \"%1\""

上面寫的你可能一臉懵逼，我給轉換下寫法：

HKEY_CLASSES_ROOTweixin(Default)          "weixinProtocol"URL Protocol      "weixinProtocol"DefaultIcon(Default)        "C:\Program Files (x86)\Tencent\WeChat\WeChat.exe,1"shellopencommand(Default)    "C:\Program Files (x86)\Tencent\WeChat\WeChat.exe" "%1"

這是不是就清楚多了。

除去第一行Windows Registry Editor Version 5.00，只看下面的轉換：

[HKEY_CLASSES_ROOT\weixin]表示這是HKEY_CLASSES_ROOT下的weixin，所以寫法是：

HKEY_CLASSES_ROOTweixin

再往下：@ 即 (Default)，其他的就沒啥了，自己看下即可。

那么這些里面都是啥意思呢：

• weixin 是協議的名稱。
• URL Protocol 表示這是一個URL協議。
• DefaultIcon 子鍵指定了協議的圖標。
• shell\open\command 子鍵指定了打開協議鏈接時應該運行的命令。

由此確定，微信的協議：weixin。

調用協議

調用協議就很簡單了。一行JavaScript代碼:

window.location.href = 'weixin://';

運行這一行代碼，瀏覽器就會彈出提示框，要我們手動確定是否要打開微信。

或者一行html代碼：

<a href="weixin://">打開微信</a>

傳參

具體說明下，調用的應用程序應該怎么傳參，要去查看具體的官方文檔，這里只是示例，以微信做個示例，不代表微信就這么傳。

調起微信時，想給微信傳參數，那么只需要在協議后面拼接參數即可，比如：

window.location.href = 'weixin://example?param=value';

那么微信拿到參數的就是'weixin://example?param=value'。

這點也好解釋，前面我粘貼的注冊表信息shell/open/command的協議鏈接是這樣的：

"C:\Program Files (x86)\Tencent\WeChat\WeChat.exe" "%1"

這里的%1即占位符，我們通過協議打開微信，執行的命令其實是：

"C:\Program Files (x86)\Tencent\WeChat\WeChat.exe" "weixin://example?param=value"

微信可以解析這個參數，然后執行對應的操作。

自定義

自定義不是教怎么去修改別的應用程序的注冊表協議，這點我覺得沒太大必要。

畢竟你在你的電腦設置了一個特殊的協議，比如把微信的協議weixin://改成we_weixin://，但是把調用代碼放到別的電腦上還是白搭，別的電腦可不是這樣的協議名字。

也不要想著在瀏覽器上運行JavaScript時，操縱注冊表修改協議，如果JavaScript運行在瀏覽器環境里，連操作用戶本地文件都不允許，操作注冊表，不現實。

---

自定義 指的是我們自己編寫的客戶端軟件如何被調起。

分為以下幾步：

1. 編寫客戶端軟件
2. 在客戶端安裝的過程中向用戶注冊表中注冊自定義協議
3. 在網頁中調用協議

這些專門開發桌面應用程序的開發框架，比如Electron會給我們提供更多的權限和能力，讓我們可以通過執行Javascript代碼來調用本地系統資源。

寫入協議

那，如何向注冊表寫入協議：

可以使用批處理腳本.bat，也可以通過Node.js中的child_process模塊執行腳本: (electron就自帶nodejs環境)，也可以使用第三方庫，例如regedit

這里先介紹，child_process如何寫入：

const { exec } = require('child_process');const command = 'reg add HKCR\RegistryKey /v YourValueName /t REG_SZ /d "YourValue"';exec(command, (error, stdout, stderr) => {if (error) {console.error(`執行錯誤: ${error}`);return;}console.log(`stdout: ${stdout}`);console.error(`stderr: ${stderr}`);
});

這里的 reg add 命令用于在注冊表中添加一個新的鍵值對。這需要管理員權限才能執行。

解釋下這個command

'reg add HKCU\\Software\\YourRegistryPath /v YourValueName /t REG_SZ /d "YourValue"'

• reg: 這是注冊表編輯器的命令行工具。

• add: 這是 reg 工具的一個子命令，表示要添加一個新的注冊表項。

• HKCR : 這是注冊表的根鍵之一， 存儲了系統中所有已注冊的文件類型、協議、COM 對象等信息。

• RegistryKey: 這是在 HKCU 下的子路徑，表示你要添加鍵值對的具體位置。你可以將 RegistryKey替換為實際的路徑。如果路徑不存在，reg add 命令會創建它。

• /v YourValueName: /v 表示要添加的是一個值（value），而 YourValueName 是這個鍵值對的名稱。你可以將 YourValueName 替換為實際的值名稱。

• /t REG_SZ: /t 表示值的類型（type），REG_SZ 表示這是一個字符串類型的值。這表示你要添加的值是一個字符串。

• /d "YourValue": /d 表示數據（data），而 "YourValue" 是這個值的具體內容。你可以將 YourValue 替換為實際的值。

再說第三方庫regedit如何操作，這就很簡單了：

1. 下載庫

   npm i regedit
   

2. 以微信的注冊表為例，如何利用regedit寫入：

   const regedit = require('regedit');// 協議根路徑
   const weixinRegistryKey = 'HKCR\\weixin';
   const weixinProtocolValue = 'weixinProtocol';
   const weixinDefaultIconKey = 'HKCR\\weixin\\DefaultIcon';
   const weixinShellOpenCommandKey = 'HKCR\\weixin\\shell\\open\\command';
   const weixinExePath = 'C:\\Program Files (x86)\\Tencent\\WeChat\\WeChat.exe';// Write registry values
   regedit.putValue({[weixinRegistryKey]: {'@': weixinProtocolValue,'URL Protocol': weixinProtocolValue,},[weixinDefaultIconKey]: {'@': `${weixinExePath},1`,},[weixinShellOpenCommandKey]: {'@': `"${weixinExePath}" "%1"`,},
   }, (err) => {if (err) {console.error(`Error writing to the registry: ${err.message}`);} else {console.log('Registry updated successfully');}
   });
   

協議寫好之后，調用協議就不多說了，和上面的一樣。

獲取參數

自定義了協議，如果用戶調用了協議給我們傳了參數我們該如何獲取呢？

在nodejs環境下可以使用 process.argv 獲取參數。