使用Electron製作一個快速搜尋應用（入門向）

我不是你煌哥哥發表於2018-11-27

什麼是Electron

Electron是由Github開發，用HTML，CSS和JavaScript來構建跨平臺桌面應用程式的一個開源庫。 Electron通過將Chromium和Node.js合併到同一個執行時環境中，並將其打包為Mac，Windows和Linux系統下的應用來實現這一目的。

由於平常去不同的站點搜尋進行程式碼搬運時要經常切換不同的網站再進行搜尋，本來想做一個整合搜尋的站點方便自己平常搜尋用；後來看到vscode忽然覺得可以使用它的爸爸——Electron來做一個試試，順便練練手入門一下Electron，而且還可以使用快捷鍵撥出視窗來搜尋，比用網站做更快。

想做的功能有：

  1. 平常隱藏在系統托盤，使用時用快捷鍵Alt+ s撥出搜尋視窗
  2. 可以拖動搜尋按鈕，調整順序
  3. 可以自定義搜尋站點，增加刪除修改
  4. 可設定開機啟動

專案地址 可以下載DEMO玩玩，直接解壓縮就可以了demo.zip

應用GIF

Alt + s 撥出視窗,點選選擇搜尋目標網站

1.gif

直接回車相當於點選第一個按鈕

2.gif

翻譯

3.gif

拖動調整位置

4.gif

設定

5.gif

新增網站

6.gif

刪除網站

7.gif

拖動調整位置

8.gif

使用

# Clone this repository
git clonehttps://github.com/wadejs/W-SEARCH.git
# Install dependencies
npm install
# Run the app
npm start
複製程式碼

打包

這裡使用electron-builder進行打包 在package.json中加入以下程式碼

"scripts": {
    "dist": "electron-builder --win --x64"
  },
"build": {
    "appId": "searchApp",
    "productName": "W-SEARCH",
    "mac": {
      "target": [
        "dmg",
        "zip"
      ]
    },
    "win": {
      "target": [
        "nsis",
        "zip"
      ],
     }
  }
複製程式碼

然後使用 npm run dist 進打包

npm run dist
複製程式碼

相關文章