成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 瀏覽器啟動(dòng)客戶端

Cciradih / 1124人閱讀

摘要：作者鐘離，酷家樂客戶端負(fù)責(zé)人原文地址酷家樂客戶端下載地址文章背景在酷家樂客戶端在改版成功后，我們積累了許多的寶貴的經(jīng)驗(yàn)和最佳實(shí)踐。鐘離可以注冊(cè)多個(gè)協(xié)議接收參數(shù)協(xié)議注冊(cè)完畢之后，我們已經(jīng)可以在瀏覽器中，通過訪問自定義協(xié)議來啟動(dòng)客戶端了。

作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人
原文地址：https://webfe.kujiale.com/browser-to-client/
酷家樂客戶端：下載地址 https://www.kujiale.com/activity/136
文章背景：在酷家樂客戶端在V12改版成功后，我們積累了許多的寶貴的經(jīng)驗(yàn)和最佳實(shí)踐。前端社區(qū)里關(guān)于Electron知識(shí)相對(duì)較少，因此希望將這些內(nèi)容以系列文章的形式分享出來。
系列文章：



【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 入坑篇


【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 軟件自動(dòng)更新


【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 瀏覽器啟動(dòng)客戶端


【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 進(jìn)程通信


【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 下載管理器


不定期更新...
背景

許多本地應(yīng)用（例如vscode、QQ），都支持通過瀏覽器來啟動(dòng)PC上的本地軟件

這個(gè)功能夠使網(wǎng)頁端和客戶端聯(lián)動(dòng)起來，用戶體驗(yàn)還是很好的，實(shí)現(xiàn)起來也并不復(fù)雜?？峒覙房蛻舳艘呀?jīng)支持了這個(gè)功能，如下圖：

實(shí)現(xiàn)原理

瀏覽器在解析url的時(shí)候，會(huì)嘗試從系統(tǒng)本地尋找url協(xié)議所關(guān)聯(lián)的應(yīng)用，如果有關(guān)聯(lián)的應(yīng)用，則嘗試打開這個(gè)應(yīng)用

例如VsCode從web端安裝插件的時(shí)候，實(shí)際上是訪問了一個(gè)vscode協(xié)議的url，從而達(dá)到啟動(dòng)用戶本地VsCode的目的

具體實(shí)現(xiàn)

現(xiàn)在，我們只需要將自定義的協(xié)議注冊(cè)到用戶電腦上，就可以實(shí)現(xiàn)功能了。用戶瀏覽器里訪問帶有自定義協(xié)議的url，即可啟動(dòng)我們的客戶端。

Windows

在windows下，注冊(cè)一個(gè)協(xié)議比較簡(jiǎn)單，寫注冊(cè)表就可以了。這部分微軟爸爸有很詳細(xì)的文檔，參考 Registering an Application to a URI Scheme)

建議在安裝程序中寫入注冊(cè)表項(xiàng)，并且指定在卸載程序中，刪除這些注冊(cè)表項(xiàng)。以下是inno setup打包程序中，操作注冊(cè)表的示例代碼

[Registry]
Root: HKCR; SubKey: Kujiale; ValueData: "KujialeProtocol"; ValueType: string; Flags: createvalueifdoesntexist uninsdeletekey;
Root: HKCR; SubKey: Kujiale; ValueName: "URL Protocol"; ValueData: "{app}{#appExe}"; ValueType: string; Flags: createvalueifdoesntexist uninsdeletekey;
Root: HKCR; SubKey: KujialeDefaultIcon; ValueData: "{app}{#appExe}"; ValueType: string; Flags: createvalueifdoesntexist uninsdeletekey;
Root: HKCR; SubKey: Kujialeshellopencommand; ValueData: "{app}{#appExe} ""%1"""; Flags: createvalueifdoesntexist uninsdeletekey; ValueType: string;

當(dāng)然，也可以在軟件啟動(dòng)的時(shí)候操作注冊(cè)表，這個(gè)時(shí)候其實(shí)是用NodeJs來與注冊(cè)表交互，推薦一個(gè)npm包node-regedit

自定義協(xié)議注冊(cè)成功后，注冊(cè)表里是這樣子的

MacOS

在MacOS系統(tǒng)下面，我們就沒有注冊(cè)表可以寫了，所以要換一個(gè)實(shí)現(xiàn)方法。在這之前，先介紹一些東西

info.plist

iOS和MacOS的應(yīng)用包中，都有一個(gè)info.plist文件，這個(gè)文件主要用來記錄應(yīng)用的一些meta信息，參考Information Property List。文件用鍵值對(duì)的形式來記錄信息(xml)，結(jié)構(gòu)如下：

CFBundleURLTypes

官方解釋：CFBundleURLTypes：A list of URL schemes (http, ftp, and so on) supported by the app.

其實(shí)呢，這個(gè)就是info.plist里面的一個(gè)key，對(duì)應(yīng)的value是一個(gè)數(shù)組?？梢酝ㄟ^這個(gè)字段來為應(yīng)用注冊(cè)一個(gè) or 多個(gè) URL Schema。參考CFBundleURLTypes

修改info.plist文件

在了解了plist文件之后，我們現(xiàn)在只需為App包中info.plist，設(shè)置CFBundleURLTypes的值即可。那么如何修改呢，手寫嗎？nonono，這種事情當(dāng)然要交給工具來做，不然太low了。

在Electron Packager中，有一個(gè)配置protocols可以注冊(cè)自定義協(xié)議，只對(duì)MacOS端生效，原理就是上面提到的修改infi.plist文件。

// for mac
options.protocols = [{
  name: "鐘離",
  schemes: ["zhongli", "test"], // 可以注冊(cè)多個(gè)協(xié)議
}];
接收參數(shù)

協(xié)議注冊(cè)完畢之后，我們已經(jīng)可以在瀏覽器中，通過訪問自定義協(xié)議url來啟動(dòng)客戶端了。

對(duì)于url中的不同參數(shù)，客戶端的行為也是不一樣的，例如vscode:extension/ms-python.python這個(gè)url，啟動(dòng)了VsCode的同時(shí)也告訴了VsCode：我要安裝插件，插件名是ms-phthon.python。

Vscode通過解析url中的參數(shù)來實(shí)現(xiàn)自定義行為，那么作為客戶端如何拿到這個(gè)url呢？

Windows

對(duì)于windows，參數(shù)會(huì)通過啟動(dòng)參數(shù)的形式傳遞給應(yīng)用程序。因此，我們可以很方便的拿到這個(gè)參數(shù)

// 通過自定義url啟動(dòng)客戶端時(shí)
console.log(process.argv);

// 打印出
[
 "C://your-app.exe", // 啟動(dòng)路徑
 "kujiale://111",  // 啟動(dòng)的自定義url
]
MacOS

在Mac下不會(huì)通過啟動(dòng)參數(shù)傳遞給應(yīng)用，通過自定義協(xié)議打開應(yīng)用，app會(huì)收到 open-url 事件

// mac下通過kujiale協(xié)議啟動(dòng)應(yīng)用
app.on("open-url", (e, url) => { // eslint-disable-line
  parse(url)； 解析url
});
最后

本文分了兩部分來講述如何從瀏覽器啟動(dòng)PC端的應(yīng)用

注冊(cè)自定義協(xié)議，對(duì)于所有應(yīng)用程序都適用

接收參數(shù)，對(duì)使用Electron構(gòu)建的應(yīng)用適用

歡迎大家在評(píng)論區(qū)討論，技術(shù)交流 & 內(nèi)推 -> [email protected]

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54045.html

相關(guān)文章

  • 【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 瀏覽器啟動(dòng)客戶端

    摘要：作者鐘離，酷家樂客戶端負(fù)責(zé)人原文地址酷家樂客戶端下載地址文章背景在酷家樂客戶端在改版成功后，我們積累了許多的寶貴的經(jīng)驗(yàn)和最佳實(shí)踐。鐘離可以注冊(cè)多個(gè)協(xié)議接收參數(shù)協(xié)議注冊(cè)完畢之后，我們已經(jīng)可以在瀏覽器中，通過訪問自定義協(xié)議來啟動(dòng)客戶端了。 作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/browser-to-client/酷家樂客戶端：下載...

    劉德剛 評(píng)論0 收藏0

  • 【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 軟件自動(dòng)更新

    摘要：作者鐘離，酷家樂客戶端負(fù)責(zé)人原文地址酷家樂客戶端下載地址文章背景在酷家樂客戶端在改版成功后，我們積累了許多的寶貴的經(jīng)驗(yàn)和最佳實(shí)踐。用戶在電腦上安裝客戶端，實(shí)際上會(huì)將客戶端代碼文件持久儲(chǔ)存到本機(jī)。通常我們會(huì)在軟件啟動(dòng)時(shí)檢查更新。 作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/electron-autoupdate/酷家樂客戶端：下載地址...

    phpmatt 評(píng)論0 收藏0

  • 【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 軟件自動(dòng)更新

    摘要：作者鐘離，酷家樂客戶端負(fù)責(zé)人原文地址酷家樂客戶端下載地址文章背景在酷家樂客戶端在改版成功后，我們積累了許多的寶貴的經(jīng)驗(yàn)和最佳實(shí)踐。用戶在電腦上安裝客戶端，實(shí)際上會(huì)將客戶端代碼文件持久儲(chǔ)存到本機(jī)。通常我們會(huì)在軟件啟動(dòng)時(shí)檢查更新。 作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/electron-autoupdate/酷家樂客戶端：下載地址...

    leiyi 評(píng)論0 收藏0

  • 【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 入坑篇

    摘要：系列文章酷家樂客戶端開發(fā)實(shí)踐分享入坑篇酷家樂客戶端開發(fā)實(shí)踐分享軟件自動(dòng)更新酷家樂客戶端開發(fā)實(shí)踐分享瀏覽器啟動(dòng)客戶端酷家樂客戶端開發(fā)實(shí)踐分享進(jìn)程通信酷家樂客戶端開發(fā)實(shí)踐分享下載管理器不定期更新本文的初衷所使用的技術(shù)棧和前端工程師完美契合。 作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

    jay_tian 評(píng)論0 收藏0

  • 【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 入坑篇

    摘要：系列文章酷家樂客戶端開發(fā)實(shí)踐分享入坑篇酷家樂客戶端開發(fā)實(shí)踐分享軟件自動(dòng)更新酷家樂客戶端開發(fā)實(shí)踐分享瀏覽器啟動(dòng)客戶端酷家樂客戶端開發(fā)實(shí)踐分享進(jìn)程通信酷家樂客戶端開發(fā)實(shí)踐分享下載管理器不定期更新本文的初衷所使用的技術(shù)棧和前端工程師完美契合。 作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

    TwIStOy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<