使用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 呼出窗口,点击选择搜索目标网站

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