Electron项目 （WEB URL变 桌面EXE）

Electron介绍

简单来说，Electron就是可以让你用Javascript、HTML、CSS来编写运行于Windows、macOS、Linux系统之上的桌面应用的库。

案例图片

开发环境安装

• 安装Node.js
  点击 这里 进入官网下载、安装。

• 验证node安装成功
  node -v
  

• 安装cnpm

  由于众所周知的原因（国内连接外国网络慢），你需要一个cnpm 代替 npm，这里是官网。
  安装命令（打开系统的cmd.exe来执行命令）：
  npm install -g cnpm --registry=https://registry.npm.taobao.org
  

• 安装Electron

  cnpm install -g electron
  

• 安装Electron-forge

  这是一个类似于傻瓜开发包的Electron工具整合项目。具体介绍点击 这里。
  cnpm install -g electron-forge
  ==================================================

两种方式创建项目

- 方式一： 使用实例代码

1、从GitHub上下载实例代码：
   git clone https://github.com/electron/electron-quick-start

2、进入到electron-quick-start目录下
   cd electron-quick-start

目录结构：

3、安装项目依赖
    npm install

4、启动项目：
npm start

5、出现如下界面，说明项目运行成功

方式二、使用electron-forge
1、创建项目

 $electron-forge init  myproject 

2、进入目录，执行

$cd myproject
$electron-forge start

WEB URL 变桌面 EXE

项目结构

创建窗口对象

let mainWindow
function createWindow () { 
  mainWindow = new BrowserWindow({
       各种属性，
       各种方法	
 });

窗口固定高宽

 mainWindow = new BrowserWindow({
    width: 400,
    height: 300, 
	});

窗口全屏显示

 mainWindow = new BrowserWindow({ 
	//全屏
	//fullscreen: true,
	});

窗口最大化显示

 mainWindow = new BrowserWindow({ 
		//不显示
		//show: false,
	});
原来是默认先不显示， 然后最大化窗口，最后窗口显示
mainWindow.maximize()
mainWindow.show()

exe图标

mainWindow = new BrowserWindow({  
	//图标 
	icon: './logo.jpg',
});

加载url里的 javascript 可执行

  mainWindow = new BrowserWindow({ 
    webPreferences: {
    	//nodeIntegration: true [默认] 
      //加载远程内容时，不论是使用BrowserWindow，BrowserView 还是 <webview>，首要任务都是禁用 Node.js 集成  【改成fasle】
      nodeIntegration: false,
	  nodeIntegrationInWorker: false  
    }
  }) 

加载远程url地址

let url="http://www.baidu.com"
mainWindow.loadURL(url);

隐藏 electron 窗体的菜单

mainWindow.setMenu(null);