Anani

Electron 应用的目录结构大体上包括：package.json,main.js,index.html。

package.json的格式和 Node 的完全一致,它的内容大概是：

			   			{
							"name"    : "your-app",
							"version" : "0.1.0",
							"main"    : "main.js"
						}
					

注意：如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js。main.js 应该用于创建窗口和处理系统时间。例如：

			   			const electron = require('electron');
						const app = electron.app;//控制应用生命周期的模块
						const BrowserWindow = electron.BrowserWindow;//创建原生浏览器窗口的模块

						//保持一个对于 Window 对象的全局引用，不然，当 JavaScript 被 GC 时 Window 会被自动关闭
						var mainWindow = null;

						// 当所有窗口被关闭了，退出
						app.on('window-all-close',function() {
							//在 OS X 上，通常用户在明确地按下 cmd + Q 之前，应用会保持活动状态
							if(process.platform != 'darwin') {
								app.quit();
							}
						});

						//当 Electron 完成了初始化并且准备创建浏览器窗口的时候，这个方法就被调用
						app.on('ready',function() {
							//创建浏览器窗口
							mainWindow = new BrowserWindow({width:800,height:600});
							//加载应用的 index.html
							mainWindow.loadURL('file://E:/app/index.html');
							//打开开发者工具
							//mainWindow.openDevTools();
							//当 window 被关闭，这个事件会被发出
							mainWindow.on('close',function() {
								//取消引用 window 对象，如果你的应用支持多窗口的话，通常会把多个 window 对象存放在一个数组里面
								mainWindow = null;
							});
						});
					

最后是想要展示的 index.html：

结果如下：

			   			const ipcMain = require('electron').ipcMain;
						ipcMain.on('asynchronous-message', function(event, arg) {
						  console.log(arg);  // prints "ping"
						  event.sender.send('asynchronous-reply', 'pong');
						});

						ipcMain.on('synchronous-message', function(event, arg) {
						  console.log(arg);  // prints "ping"
						  event.returnValue = 'pong';
						});
					

			   			const ipcRenderer = require('electron').ipcRenderer;
						//监听mian process里发出的message
						ipcRenderer.on('asynchronous-reply', function(event, arg) {
						  alert(arg); // 在electron中web page里的console方法不起作用，因此使用alert作为测试方法=>prints "pong"
						});
						ipcRenderer.send('asynchronous-message', 'ping');//在web page里向main process发出message
					

具体呈现在项目中的代码，main.js 同上面的介绍，而在web page 里的代码：

成功后的界面：

1、源码显示（两种方法）

2、打包成二进制文件（.asar）

1-0、去掉框架中的模块引入判断代码。例如：

         				//比如 jQuery 中的第一行代码中
         				!function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}
         				//改成：
         				!function(a,b){b(a)}
         			

1-1、使用 Electron 官方论坛提供的方法，改变require的写法。下面的代码各个框架通用：

         				//在引入框架之前先输入下面的代码
         				<script>
						window.nodeRequire = require;
						delete window.require;
						delete window.exports;
						delete window.module;
						</script>
         			

1-2、禁用Node.js的require模块化引入（如果你不想使用 Node.js 模块）：

         				// In the main process.
						let win = new BrowserWindow({
						  webPreferences: {
						    nodeIntegration: false
						  }
						});
         			

1-3、为使 web 项目正常浏览，在引入 jquery 后进行判断：

         				//置于引入 jQuery 之后
         				<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>
         			

2-0、在接收到命令后创建下一个窗口（创建窗口需要时间，期间可能出现空白）：

         				//在main.js中：：
						const ipc = require('electron').ipcMain;
						//进行监控，如果有new-window 发送过来，则重新创建一个窗口，文件是list.html
						   ipc.on('new-window',function() {
						            mainWindow.loadURL(url.format({
						            pathname: path.join(__dirname, '/views/list.html'),
						            protocol: 'file:',
						            slashes: true
						        }))
						   })