基于H5的跨平台桌面应用程序Electron的使用

说明

在做GUI程序的时候， 往往都是先做好了网页端，后续就会慢慢的有了app端， (不同平台的)桌面客户端等需求， 如果针对每一种平台都要对同样的业务逻辑做一套界面， 感觉会浪费掉很多的时间。于是有个想法: 如今是互联网行业发达的时候了，能不能依赖H5技术只做一套界面然后再不同平台上使用某个工具来加载呢？

考虑过的工具

• Qt 的WebEngineView

• Electron
  Qt 是基于C++的一套GUI框架， 使用此方案在跨平台的需求上是满足需求的， 但是有一点，就是每次修改都要编译， 而本来页面就是现成的， 如果每次修改页面本来就可以直接加载的话， 使用Qt就会有可能需要编译才能看到效果， 此方案不是很好

  既然H5页面是现成的， 也有可能在动态变化， 那么使用脚本语言应该是最好的选择了， 而对于能够处理后台逻辑又能渲染页面的脚本语言， 首先想到的就是nodejs了。 那么在nodejs的各种库里面，有没有用来直接在桌面上渲染并显示界面的呢？
  还真有！！ 哈哈， 就是这里说的Electron

Electron的使用

安装

其实安装Electron很简单， 因为使用Electron的工程本身就是基于nodejs的， 所以只需要像nodejs安装模块一样安装就好了

使用

我们都知道， nodejs程序会有一个入口程序， 在入口程序里面， 我们可以从Express等模块获取一个app， 这里也一样， 我们可以从Electron模块获取一个app. 其实从Electron模块里， 我们可以获取的模块有很多， 其中最基本的两个子模块就是app和BrowserWindow, app就是用来处理全局事件循环的， BrowserWindow是用来渲染html页面的

一个简单的小实例

1. 建立一个空的目录， 在终端环境下， 进入到该目录， 然后执行npm init 初始化一个nodejs项目
2. 根据第一步中设置的入口文件(如main.js, index.js)， 新建一个入口文件
3. 执行命令 "npm install --save-dev electron"来安装Electron到项目中
4. 修改Package.json中的scripts对象， 增加一个start字段， 并设置值为 “electron .”, 例如:

{
   
  "name": "NAME",
  "version": "