使用electron创建跨平台应用

进来B/S较于传统的C/S越来越受欢迎，Browser-Server模式只需要用户有一个能上网的浏览器即可，所有业务都是在服务器处理，具有跨平台、开发快的特点。但是也存在性能较低、用户体验较差。

electron可以说兼顾了B/S和C/S的优点，使用nodejs开发或者JavaScript开发，具有很高的开发效率与响应速度；同时交互界面向C/S靠拢，使用本地html、css文件创建出优美的界面，使用效果与客户端没有区别。如果觉得MFC、WPF等创建一个好看的桌面应用程序比较麻烦，那么可以试试electron。好多软件都是基于electron开发的，比如Atom、VSCode、GitHub Desktop、GitKraken、SimpleNote、Skype、Typora等等。

electron本身就是一个Chromium浏览器并包含了Node.js，同样使用HTML，CSS和JavaScript来构建界面和处理事件。electron能够做到和桌面应用程序一样的效果，是因为它提供了丰富的桌面系统API，使用非常方便。如果使用过nodejs，那么electron开发就很容易了，官网的doc也非常详细https://electronjs.org。这里记录一下我的第一个app

新建一个electron项目和新建一个nodejs项目是一样的，所以要先安装nodejs。可以用包管理器npm创建，新建一个文件夹，然后执行命令：

npm init

比如我的项目名称为mqtt，上述命令生成的package.json的内容为：

{
  "name": "mqtt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

其中的main字段表明程序的入口是index.js。接下来按照nodejs的方式编写index.js

// index.js
const { app, BrowserWindow } = require('electron');
let mainWindow;

app.on("ready", function () {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.setTitle("mqtt");
  mainWindow.loadURL('http://www.baidu.com');
  mainWindow.on('closed', function () {
    mainWindow = null;
    console.log("window closed.");
  });
});

对象app负责控制程序的生命周期，类BrowserWindow用于创建浏览器窗口。

这就是一个最基本的electron应用了，包含package.json与index.js两个文件。到这里都是nodejs的内容，还没有下载过任何东西，接下来就下载electron。electron也采用npm管理，执行命令：

1	npm install --save-dev electron

会在node_modules文件夹中下载很多模块，至此，运行环境已搭建好。要想使程序运行起来，还需要做一件事，将package.json中的scripts段添加start脚本：

"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "start": "electron ."
 },

然后执行命令：

npm start

就可以看到程序运行了

接下来开始创建自己的UI，新建一个网页文件index.html，

<!doctype html>
<html lang="ch">
<head>
  <title>mqtt</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

  <style>
    body {
      height: 100%;
      background-color: #333;
      display: -ms-flexbox;
      display: flex;
      color: #fff;
      text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
      box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5)
    }
  </style>
</head>
<body class="text-center">
  <div class="mx-auto">
    <h1>第一个electron应用</h1>
    <p>点击开始，等待接收内容</p>    
    <button class="btn btn-lg btn-outline-success" onclick="sub()">
      &nbsp;&nbsp;&nbsp;&nbsp;开&nbsp;&nbsp;始&nbsp;&nbsp;&nbsp;&nbsp;
    </button>
    <p></p>
    <form>
      接收：<textarea id="content" rows="10" class="form-control"></textarea>
    </form>
  </div>
</body>
</html>

<script>
  function sub() {
    console.log("mqtt")
    var mqtt = require('mqtt')
    var client = mqtt.connect('mqtt://test.mosquitto.org')

    client.on('connect', function () {
      console.log("connect")
      client.publish('hello-server', 'Hello mqtt')
      console.log("publish")
      client.subscribe('hello-client')
      console.log("subscribe")
    })

    client.on('message', function (topic, message) {
      // message is Buffer
      console.log(message.toString())
      var old=document.getElementById("content").value;
      document.getElementById("content").value = old+"\n" + message.toString();
    })
  }
</script>

效果如图：

功能是使用mqttjs订阅一个topic，并将收到的消息显示在文本栏。

对应的入口文件index.js也要修改，将原来的mainWindow.loadURL('http://www.baidu.com');改为mainWindow.loadFile('index.html');，即：

// index.js
const { app, BrowserWindow } = require('electron');
let mainWindow;
app.on("ready", function () {
  mainWindow = new BrowserWindow({ width: 400, height: 600 });
  mainWindow.setTitle("mqtt");
  mainWindow.loadFile('index.html');
  mainWindow.on('closed', function () {
    mainWindow = null;
    console.log("window closed.");
  });
});

再次执行npm start就会看到上图的画面，当有topic消息来到时，文本栏会显示消息

应用打包

最简单的方式是使用electron-packager打包，先用npm install electron-packager -g下载工具，然后在项目文件夹中执行

1	electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

但是在国内可能会很慢。也可以直接下载现成的二进制文件https://github.com/electron/electron/releases，然后将项目文件夹命名为app，放到resources文件夹中。

用这样的方式打包应用会使得文件太多太大，有人将electron进行了精简https://weolar.github.io/miniblink/，可以满足一般的应用。