Electron網頁調起客戶端

Electron網頁調起客戶端(僞協議)

相信你們平時使用瀏覽器時遇到過點擊一個連接或者按鈕，瀏覽器會詢問是否打開客戶端，移動端和桌面端都有這種狀況。好比百度網盤，在網頁上點擊連接時會拉起百度網盤的客戶端進行下載，實際上這些功能都是經過註冊僞協議來實現的，本篇主要介紹如何經過僞協議調起Electron客戶端，並獲取僞協議傳過來的參數。

實現目標

1. 爲Electron添加一個僞協議(URL Scheme 協議)。
2. 在瀏覽器網頁上添加一個僞協議的點擊。拉起應用。

Mac的URL Scheme

Mac上每一個應用包中都有一個info.plist文件，這個通常用做於一些訪問權限的配置及軟件的信息，ios開發的同窗可能比較熟悉，註冊URL Scheme其實是在這個文件中添加對應的key，value。咱們能夠查看一些軟件的URL Scheme：

1. 訪達中找到桌面軟件，好比vscode。
2. 右鍵顯示包內容。
3. 進入Contents文件夾。
   
4. 找到info.plist，直接點擊查看或者用vscode打開，這個CFBundleURLName就是協議名，CFBundleURLSchemes爲協議內容
   
   
5. 瀏覽器輸入對應的URL Scheme，vscode://file/${filePath}，filePath爲文件的pwd路徑,看是否vscode能打開對應文檔。

Windows的URL Scheme

Windows上是經過在註冊表中添加URL Protocol來實現僞協議的，其實說簡單點也是添加key，value值。同上，咱們查看一下vscode：

1. win+r輸入regedit肯定。
2. 找到HKEY_CLASSES_ROOT\vscode，很差找的能夠Ctrl+F勾選數據進行搜索'URL:vscode'，能夠找到兩處HKEY_CURRENT_USER\Software\Classes\vscode，固然這兩處值都是同樣的。
   
   

3. 咱們能夠右鍵vscode目錄將其導出成一個reg文件，能夠看到關鍵處在兩點，一個URL:vscode，還有一個是vscode的啓動路徑。
   也就是說檢測到vscode://會執行下面的exe命令，%1是喚起軟件的僞協議，瀏覽器打開vscode://file/${filePath}試試，好比個人vscode://file/F:/work/electron/vue-cli-electron/README.md，看是否vscode能打開對應文檔

   Windows Registry Editor Version 5.00
   
   [HKEY_CLASSES_ROOT\vscode]
   "URL Protocol"=""
   @="URL:vscode"
   
   [HKEY_CLASSES_ROOT\vscode\shell]
   
   [HKEY_CLASSES_ROOT\vscode\shell\open]
   
   [HKEY_CLASSES_ROOT\vscode\shell\open\command]
   @="\"E:\\Microsoft VS Code\\Code.exe\" --open-url -- \"%1\""

實現URL Scheme

這裏介紹一下Electron上實現僞協議的兩種方式：

1. 經過setAsDefaultProtocolClient註冊協議

這個要講的很少，看文檔的東西連接，在主進程直接寫上就能夠：

import { app } from 'electron'

if (!app.isDefaultProtocolClient('vue-cli-electron')) {
  app.setAsDefaultProtocolClient('vue-cli-electron')
}

打包後安裝軟件，打開軟件，嘗試在瀏覽器中打開vue-cli-electron://，看是否有喚起提示。

優勢：簡單，快捷。
缺點：首先這個是在主進程中執行的，也就是說首次安裝軟件後必須打開軟件後纔會寫入對應的URL Scheme，軟件卸載時Mac的info.plist在包內，一塊兒刪除了，但Windows是寫入註冊表的，並不會被主動清理，卸載軟件後再打開僞協議仍是會有打開軟件的提示。

2. electron-builder + nsis

使用electron-builder進行配置在能夠打包（安裝）時就寫入僞協議，而且能夠在卸載的拓展宏裏進行註冊表的清理，使用此方式的話，方案1的註冊能夠除去掉。

• Mac配置：在vue.config.js中的builderOptions添加electron-builder的配置連接：

  protocols: [{
  name: 'vue-cli-electron',
  schemes: ['vue-cli-electron']
  }],

  這裏要注意的是文檔展現有點問題，fileAssociations和protocols是屬於同級的，並非fileAssociations裏面的。這樣咱們就完成了Mac系統僞協議的配置。

• Windows配置：在項目根目錄新建installer.nsh，一樣的在builderOptions的nsis中添加include: "installer.nsh"

  !macro customInstall
    DeleteRegKey HKCR "vue-cli-electron"
    WriteRegStr HKCR "vue-cli-electron" "" "URL:vue-cli-electron"
    WriteRegStr HKCR "vue-cli-electron" "URL Protocol" ""
    WriteRegStr HKCR "vue-cli-electron\shell" "" ""
    WriteRegStr HKCR "vue-cli-electron\shell\Open" "" ""
    WriteRegStr HKCR "vue-cli-electron\shell\Open\command" "" "$INSTDIR\${APP_EXECUTABLE_FILENAME} %1"
  !macroend
  
  !macro customUnInstall
    DeleteRegKey HKCR "vue-cli-electron"
  !macroend

  這裏簡單介紹一下，customInstall是electron-builder提供的NSIS拓展宏，看名字這個是安裝時執行的，同理customUnInstall是卸載執行，其餘狀況參考連接
  DeleteRegKey是刪除註冊表
  HKCR即咱們上面說的HKEY_CLASSES_ROOT的簡寫，HKCU->HKEY_CURRENT_USER，HKLM->HKEY_LOCAL_MACHINE，HKU->HKEY_USERS
  WriteRegStr是寫入註冊表
  $INSTDIR是咱們選擇的安裝路徑
  ${APP_EXECUTABLE_FILENAME}是軟件exe名

好了，如今咱們能夠打包安裝，嘗試在瀏覽器中打開vue-cli-electron://，Windows卸載軟件後再在瀏覽器中打開vue-cli-electron://看還會有提示沒有。
優勢：萬金油模式，自由度大，功能全面。
缺點：麻煩，須要必定的nsis知識。

開發環境配置僞協議

上面兩種方式都說完了，這算是一個補充吧，畢竟咱們在開發時不可能寫一點就打個包測試，挺費時間的。
咱們在開發時通常直接使用setAsDefaultProtocolClient進行僞協議設置，可是設置後在打開網頁上的僞協議連接時會報一個錯誤，可是打包後又是好好的，這是什麼形成開發和打包以後的差別呢？
這裏就補充一個知識點，咱們的開發環境是怎麼啓動的，咱們能夠打印一下process.argv，這個就是Electron的啓動參數，咱們能夠看到開發環境是（Mac同理，路徑不一樣）：

[
  'F:\\work\\electron\\vue-cli-electron\\node_modules\\electron\\dist\\electron.exe',
  'dist_electron'
]

看到這裏大多數同窗可能已經明白了，開發環境是啓動一個node包的exe，而後傳入咱們webpack構建好的目錄而啓動的服務，而這個參數在打包後則是軟件的exe文件

xxxxxxxx\\electron開發.exe

咱們看一下完整的僞協議app.setAsDefaultProtocolClient(protocol[, path, args])，protocol是協議名，path是Electron可執行文件路徑（也就是exe地址，默認process.execPath），args傳遞給可執行文件的參數，默認爲空數組。
那麼也就得出答案了：

app.setAsDefaultProtocolClient('vue-cli-electron')
這個註冊時只有protocol和path，故在開發環境經過vue-cli-electron://啓動時，只啓動了那個node包的exe，咱們後面的構建目錄並無在註冊時寫入。

那麼咱們只須要進行一下判斷，把這個目錄追加到args裏便可

if (app.isPackaged) { // 是否處於打包
  app.setAsDefaultProtocolClient('vue-cli-electron')
} else {
  app.setAsDefaultProtocolClient('vue-cli-electron', process.execPath, [
    path.resolve(process.argv[1])
  ])
}

注：如何你開發的協議和打包後的協議名同樣的話，同時都啓動的話，調用僞協議可能會啓動到開發的哦，如今試試本地開發可否經過僞協議拉起咱們的客戶端。

原本想把如何獲取僞協議連接中的參數也放在這一期的，可是感受這樣篇幅太長了不利於閱讀，那麼放在下一期更新吧，敬請期待。

本系列更新只有利用週末和下班時間整理，比較多的內容的話更新會比較慢，但願能對你有所幫助，請多多star或點贊收藏支持一下

本文地址：https://xuxin123.com/electron/url-scheme
本文github地址：連接