electron创建桌面应用的三种方式

为什么使用electron开发桌面应用？

1）electron 能够使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
2）electron 能够兼容到vue 、react 、angular
3）electron 可以在windows,linux，mac OS上面运行

为什么不使用c++，c#？

1）electron开发效率高，桌面效果更佳。
2）市面上c++，c#开发人员基本是稀缺物种，开发成本大，后期项目维护困难。
3）java也有类似Swing之类的桌面UI组件，但是效果比较一般，也能做比较酷的效果但是比较耗时。

electron有什么弊端？

1）打包出来的APP太大。
2）在html没有被加载完成前，窗口只用用背景色去填充，不能使用个性化的背景图案，这会造成首次加载的体验不好。

总的来说，electron仍是桌面应用开发的趋势。

electron 的三种创建方式：

第一种：使用github

使用github下载，地址： https://github.com/electron/electron-quick-start
安装依赖项 cnpm install 或 npm install
启动项目 npm start

第二种：通过electron-forge创建项目

electron-forge 相当于electron 的脚手架 ，（类似vue-cli），快速创建运行打包electon 项目
1，全局安装 npm install -g electron-forge （安装一次就可）
2，创建项目 electron-forge init 项目名
注意：这一步会默认安装node 模块，如果失败删掉 node_modules，重新cd到项目里面运行 cnpm install 或 yarn
3，cd到项目名
4，运行 npm start

第三种：通过electron 手动创建一个项目

1.新建一个文件夹 （不能有中文）
2.新建一个index.html 和一个 main.js
3.打开控制台 npm init 生成一个package.json 配置项目的原数据
注意package.json 里面配置的mian 必须是入口js(主进程)
4.运行 electron .

遇到的问题：

1）npm install 无效，
可能是网速不够，可以切换到cnpm ，或者yarn
2）electron . 命令无效
electron 未配置到path环境变量里。
也可以配置start命令，安装electron 的node包使用命令 npm start 打开项目。
3）require is not defined
打开集成nodejs的功能

主进程main.js 的基本代码

//引入 electron 模块
var electron = require('electron');

//nodejs的path 模块 ，拼接路径
var path = require('path');

//创建electron 引用
var app = electron.app;

//创建electron BrowserWindow的引用 
var BrowserWindow = electron.BrowserWindow;

//变量 保存 对应用窗口的引用
var mainWindow = null;

app.on('ready',()=>{
    //创建 BrowerWindow 的实例，赋值给mainWindow打开窗口
    mainWindow = new BrowserWindow({
        width:800,
        height:600,
        webPreferences:{
            nodeIntegration:true //是否集成nodejs,否则在index.html中写 require('fs')时会报错：require is not defined
        }
    }); // 软件默认打开的宽度高度 {width:400,height:400}

    // mainWindow.loadFile('index.html'); //把index.html 加载到窗口里面   //相对路径
 
    // mainWindow.loadURL(`file://${__dirname}/index.html`)          // 绝对路径
    mainWindow.loadURL(path.join('file:',__dirname,'index.html'))  // 绝对路径
    // console.log(path.join('file:',__dirname,'index.html'))

    mainWindow.webContents.openDevTools(); // 开启渲染进程中的调式模式

    mainWindow.on('closed',()=>{
        mainWindow = null;
    })
})