前端开发者也能够酷酷地开发桌面程序

时间 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打个压缩包发给朋友，朋友解压就可使用你写的程序啦~~

　　更多详细教程之后会写，程序自动更新，程序链接操做数据库，以及程序如何跟mysql一块儿打包，用户能够一键安装你的程序+mysql。

　　须要注意的是：

　　electron不支持windows xp系统，只支持win7及以上。