前端開發者也能夠酷酷地開發桌面程序

時間 2019-11-18

原文原文鏈接

　　本文是小白教程，大神請略過。廢話很少說，開始使用electron簡單搭建一個桌面程序。html

　　前提條件：已安裝nodejs 。node

　　第一步：充分提起興趣，本身動手寫一個hello world的桌面程序mysql

在桌面打開命令行（win10系統能夠按住Shift鍵，在桌面空白處右鍵，點擊「在此處打開命令窗口」，win7打開命令行後cd到桌面下）或git。
輸入如下命令行建立electron-test文件夾
```
mkdir electron-test
```
而後cd到此文件夾下git
```
cd electron-test
```
而後在此目錄下web
```
npm init
```
都選擇默認按Enter鍵，完成後，在electron-test文件夾下能夠看到package.json文件。sql
繼續使用命令行，安裝electron
```
npm install electron --save-dev
```
若是安裝不上，可使用淘寶鏡像來安裝，執行以下兩條命令：數據庫
```
npm install cnpm -g
cnpm install electron --save-dev
```
成功後，能夠在package.json文件看到npm

electron程序分爲主進程和渲染進程，簡單理解就是在主進程中建立窗口，在渲染進程中寫頁面。在electron-test目錄下建立主進程文件main.js，並將package.json的"main"配置項修改成咱們的主進程"main.js"。接下來，在main.js裏面寫以下代碼（須要瞭解ES6）：json

const {app, BrowserWindow} = require("electron");


app.on("ready", () => {
    // 建立窗口
    let win = new BrowserWindow({width:800, height:600});
    // 窗口加載主頁面, 即electron-test/index.html
    win.loadURL(`${__dirname}/index.html`);
    // 打開調試工具
    win.webContents.openDevTools();
});

在electron-test目錄下建立index.html，代碼以下：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    hello world!
</body>
</html>

修改package.json的scripts配置項，以下：

{
  "name": "electron-test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^1.6.11"
  }
}

在命令行運行以下命令：

npm start

hello world程序就出來了, 如圖所示：

　　第二步：將程序打包，把快樂分享給你們windows

仍是在electron-test下運行命令行，安裝打包工具electron-packager：
```
npm install electron-packager --save-dev
```
安裝不上用淘寶鏡像：
```
cnpm install electron-packager --save-dev
```
修改package.json scripts 配置項，以下：
```
{
  "name": "electron-test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "packager": "electron-packager . app --platform=win32 --arch=x64 --out ./OutApp --overwrite"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^1.6.11"
  }
}
```
打包命令配置項：
```
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
```
配置說明：
* location of project：項目所在路徑
* name of project：打包的項目名字
* platform：肯定了你要構建哪一個平臺的應用（Windows、Mac 仍是 Linux）
* architecture：決定了使用 x86 仍是 x64 仍是兩個架構都用
* electron version：electron 的版本
* optional options：可選選項

在此處，項目名字爲app，構建平臺爲windows，x64表示64位系統，能夠選擇ia32，--out 表示輸出路徑爲 OutApp，--overwrite表示覆蓋前面生成的文件。
命令行執行：
```
npm run-script packager
```
完成後，能夠看到

將 app-win32-x64打個壓縮包發給朋友，朋友解壓就可使用你寫的程序啦~~