使用Electron製做一個快速搜索應用（入門向）

什麼是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 呼出窗口,點擊選擇搜索目標網站

直接回車至關於點擊第一個按鈕

翻譯

拖動調整位置

設置

添加網站

刪除網站

拖動調整位置

使用

# 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
複製代碼