『壹』 怎么将网页打包成桌面应用（web前端页面
在 HTML5的崛起、javaScript要一统天下之际，有一个名为【跨平台】的技术越来越火。为什么会这么火？因为软件开发者只需一次编写程序，即可在 Windows、Linux、Mac、IOS、Android 等平台运行，大大降低了程序员的工作量，也使公司的产品可以快读迭代。曾经跨平台技术的不被看好，如今随着手机、电脑硬件的发展而快速发展。这一切，几乎由HTML5技术推动，当然，JavaScript 这个语言，是最大的功臣。
基于 HTML5 的跨平台技术比较出名的有 PhoneGap、Cordova，常常用于开发 webapp；还有 Egret、Cocos-creator、Unity 等，常用于开发游戏；还有基于 Node.js 的 nw.js，用于开发桌面应用，以及 Electron，一款比 nw.js 还强大的用网页技术来开发桌面应用的神器。
其实，以上都是废话，现在进入主题：怎么用 Electron 将网页打包成 exe 可执行文件！
假设：
1、你已经安装并配置好了 node.js （全局安装）
2、你已经用 npm 安装了 electron （全局安装）
3、你已经写好了前端网页（html、css、javascript 这些，或者基于这些的前端框架写好的网页）
4、以上三点看不懂的，赶紧去网络。。。
你如果具备了以上的假设，请继续往下看：
1、找到你的前端网页项目文件夹，新建 package.json、main.js、index.html 三个文件（注：其中的 index.html 是你的网页首页）
你的项目目录/├── package.json├── main.js└── index.html
2、在 package.json 中添加如下内容
{"name" : "app-name","version" : "0.1.0","main" : "main.js"}
3、在 main.js 中添加下面的内容，这个 main.js 文件就是上面 package.json 中的 "main"键 的值，所以可根据需要修改
const {app, BrowserWindow} = require('electron')const path = require('path')const url = require('url')// Keep a global reference of the window object, if you don't, the window will// be closed automatically when the JavaScript object is garbage collected.let winfunction createWindow () {// Create the browser window.win = new BrowserWindow({width: 800, height: 600})// and load the index.html of the app.win.loadURL(url.format({pathname: path.join(__dirname, 'index.html'),protocol: 'file:',slashes: true}))// Open the DevTools.// win.webContents.openDevTools()// Emitted when the window is closed.win.on('closed', () => {// Dereference the window object, usually you would store windows// in an array if your app supports multi windows, this is the time// when you should delete the corresponding element.win = null})}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', createWindow)// Quit when all windows are closed.app.on('window-all-closed', () => {// On macOS it is common for applications and their menu bar// to stay active until the user quits explicitly with Cmd + Qif (process.platform !== 'darwin') {app.quit()}})app.on('activate', () => {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (win === null) {createWindow()}})// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.
4、如果你的网页首页的文件名不是 “index.html”，那么请在 main.js 中将其中的 'index.html' 修改为你的网页首页名
5、打开 DOS，cd 到你的项目目录（或直接在你的项目目录下空白的地方 shift+鼠标右键，然后点击在此处打开命令窗口，这里看不懂的，唉，网络吧少年）
6、在上一步的 DOS 下，输入npm install electron-packager -g全局安装我们的打包神器
npminstallelectron-packager-g
7、安装好打包神器后，还是在上一步的 DOS 下，输入electron-packager . app –win –out presenterTool –arch=x64 –version 1.4.14 –overwrite –ignore=node_moles 即可开始打包
electron-packager . app –win –out presenterTool –arch=x64 –version 1.4.14 –overwrite –ignore=node_moles
这个命令什么意思？蓝色部分可自行修改：
electron-packager .可执行文件的文件名–win –out打包成的文件夹名–arch=x64位还是32位–version版本号–overwrite –ignore=node_moles
以上是最简单的打包方式，至于怎么修改窗口大小、菜单栏怎么加、怎么调用系统API这些，就给你慢慢去研究Electron了。
如果你打包总是不成功，觉得很烦，同时对扩展功能没什么要求的话，
里面有我已将内容为 hello,world 的 index.html 网页通过 Electron 框架打包为 windows 环境下的桌面应用。
现只需将你的网页前端项目复制到 /resources/app/project 目录下，双击 exe 文件即可以桌面应用的方式运行你的网页。
『贰』 如何在第三方库中引用egret的库
一、通过直接修改项目的index.html进行配置首先在项目libs目录下新建一个puremvc(名字可自定)文件夹，但是不要新建在libs/moles下面。将puremvc文件夹bin目录下的所有文件都拷贝到刚才新建的文件夹下面，然后修改项目的index.html，在<!–other_libs_files_start–>标签之间引入相应的js文件即可。<script egret="lib" src="libs/puremvc/puremvc-typescript-multicore-1.1.js" src-release="libs/puremvc/puremvc-typescript-multicore-1.1-min.js"></script>这样就配置好了，但是目前却还是没办法用，因为puremvc编译后的js文件加入了AMD模块规范，在egret项目中无法直接使用，因此需要注掉AMD模块声明部分puremvc-typescript-multicore-1.1.js和puremvc-typescript-multicore-1.1-min.js都需要注掉AMD模块定义部分，这样就可以使用puremvc库了。二、标准配置在项目所在文件夹下，用命令行egret create_lib puremvc创建一个egret库，当然目录路径可以任选，但是最好不要在项目文件夹下创建。将puremvc文件夹bin目录下的所有文件都拷贝到刚才新建的文件夹下的src目录中，修改刚才库文件夹下的package.json,配置如下<pre name="code" class="html">{"name": "egret","version": "3.2.2","moles": [{"name": "puremvc","description": "puremvc","files": ["puremvc-typescript-multicore-1.1.d.ts","puremvc-typescript-multicore-1.1-min.js","puremvc-typescript-multicore-1.1.js"],"root": "src"}]}在当前库文件夹下调用egret build编译库，然后修改项目egretProperties.json，moles下增加如下配置{"name":"puremvc","path":"../puremvc"}编译项目即可自动完成配置，要注意的是这里也是要去掉puremvc-typescript-multicore-1.1-min.js和puremvc-typescript-multicore-1.1.js中的AMD模块部分的。
『叁』 如何使用TexturePacker快速导出Egret能用的纹理
TexturePacker可以很方便的制作位图纹理集。同时TexturePacker支持众多格式。
目前TexturePacker官方还没有支持Egret所支持的纹理集格式，但可以为TexturePacket安装插件来支持Egret纹理集导出。
重启TexturePacker后，可以在Data Format选项中看到egret-spritesheet选项。
『肆』 什么是白鹭引擎
Egret Engine（白鹭引擎）是白鹭时代推出的一款使用TypeScript语言构建的开源免费的移动游戏引擎。通过白鹭引擎，开发者可以快速地创建可以运行在手机App的WebView或者浏览器中的HTML5移动游戏，也可以编译输出成基于Android、iOS、Windows Phone的跨平台原生移动游戏。应用Egret引擎开发HTML5移动游戏，不但能让H5游戏具备牛逼的性能表现，并且效率很高。
『伍』 什么是白鹭引擎
Egret Engine（白鹭引擎）是白鹭时代推出的一款使用TypeScript语言构建的开源免费的移动游戏引擎。通过白鹭引擎，开发者可以快速地创建可以运行在手机App的WebView或者浏览器中的HTML5移动游戏，也可以编译输出成基于Android、iOS、Windows Phone的跨平台原生移动游戏。应用Egret引擎开发HTML5移动游戏，不但能让H5游戏具备牛逼的性能表现，并且效率很高。
『陆』 egret怎么添加puremvc
说学就学，可是第一步就让我感觉很费事~~（哎~菜鸟当久了）。要开始学，得先下个PureMVC框架装上吧。找了半天PureMVC框架，下载下来后，发现是一个压缩包，大小只有几百K（心存怀疑，怎么这么小呀）。解压之后，根据惯性开始寻找一个类似Setup的东东。狂汗，就是找不到这个东西。这下我认定刚才下错东西了。于是，在网上又是一阵狂搜，结果证明自己没下错。-_-!!!第二步，开始安装PureMVC。没有setup，怎么装呢？是不是添加引用就可以了呢？可是又该怎么添加呢？（我用得是FlashDevelop这个编辑AS的软件）网上又是一阵狂搜，可搜到的都是谈论PureMVC的架构怎么样或者pureMVC具体应用怎么写，就是没有介绍刚开始该怎么配置的。“最危险的地方就是最安全的地方”，结果在PureMVC的下载页内找到了“Installation ”字样。其中的大概做法，就是解压，然后将“PureMVC_AS3_2_0_4.swc”添加到项目的库中。因为，我用的是FlashDevelop，所以添加方法如下：选中项目的lib文件夹-》右键添加存在的文件-》选择PureMVC_AS3_2_0_4.swc-》右键单击添加进来的这个文件-》选择添加到库中（Add To Library）。这样便可以算前期工作全部结束了。第三步，查找关于PureMVC的介绍，补一下理论知识。这些东西，网上超多，我就不介绍了。 简单的说，PureMVC源于MVC模式，主要就是Model、View、Controller这三层次。但在PureMVC中上述三个都被封装成了三个核心层，并通过单例模式提供给应用程序。开发人员不需要直接使用这三个核心层。PureMVC为了简化开发复杂度，提供了一个Facade类，该类提供了与核心层通信的唯一接口，可以初始化上述三个核心层，并可以访问它们的public方法，同时该类也是以单例模式提供给应用程序。开发人员只需要继承一个Facade类并创建具体的Facade类就可以实现整个MVC模式。除了知道Facade类之外，还需要了解与三个核心层相辅助的三个类：Proxy、Mediator、Command。Proxy，可以理解为代理，负责操作数据的存取。Mediator，可以理解为媒介，负责UI层与控制层之间的沟通。Command，则是用来操作具体的业务逻辑。为了对这三个核心层尽量的解耦，PureMVC中采用了消息机制，层与层之间的通信通过发送消息(notification)来实现。消息发送者只需要实现发送，不需要知道谁会接收这些消息。消息接收者如果需要接收消息，只需要注册一下对应的消息就可以了。如：registerCommand(START_UP, StartUpCommand);这句话产意思就是注册了一个对应关系，其中START_UP是消息的名称，StartUpCommand则是一个Command，这样当有人发送了START_UP名称的消息后，就会由StartUpCommand进行处理。第四步，动手写自己的Demo（在我的这个Demo中，实现功能很简单：记录每次鼠标单击时在X方向上的偏移量）。1）创建一个新的项目，就叫做 "MyFirstPureMvc”吧。新创建的项目，应该可以看到bin、lib、src这三个文件夹，在src下有一个main.as文件，bin下有一些用于呈现网页的文件（项目中基本不需要用到）。2）在lib文件夹中添加PureMVC_AS3_2_0_4.swc，并添加到库中。3）在src文件夹中添加三个子文件夹：Model、View、Controller。Model文件中放置MouseClickProxy.as文件。View中放置StageMediator.as文件。Controller中放置StartUpCommand.as和MouseClickCommand.as这两个文件。具体内容，请看下面。4）在src文件夹中接着添加ApplicationFacade.as文件，名称可以不一样。这个主要是用来继承Facade类的。如果你了解了基本的PureMVC框架结构之后，应该明白Facade这个类的重要性。package{import org.puremvc.as3.patterns.facade.Facade;import controller.*/*** Facade模式来实现统一的接口，对外只提供了startup方法用于启动* 在该类被创建的时候会自动调用initializeController方法，需要在该方法中对Command进行注册* 接着，调用startup方法启动（也就是发送一个消息，因为之前已经注册了Command,所以相应的方法会去执行execute进行响应）。* @author*/public class ApplicationFacade extends Facade{public static const START_UP:String = "START_UP";public static const MOUSE_CLICK:String = "MOUSE_CLICK";public static function getInstance(): ApplicationFacade {if (instance == null) {instance = new ApplicationFacade();}return instance as ApplicationFacade;}public function startup(app:Object):void{sendNotification(START_UP, app);}override protected function initializeController():void {super.initializeController();registerCommand(START_UP, StartUpCommand);registerCommand(MOUSE_CLICK, MouseClickCommand);}}}上述语句中的initializeController方法中首先初始化了Controller控制器，并建立了Command与消息之间的映射关系。然后调用startup启动整个程序。在sendNotification中，发送了一个名为START_UP的消息。并传递了一个app对象。根据注册的关系，StartUpCommand类会接收到这个消息。在这个类中，主要实现了父类的execute方法。在该方法中注册了一个代理和媒介。这两个东东，在随后的程序运行中需要使用，所以要进行一下注册。注册了之后，接下去如果要使用则直接可以从facade中获取。接着来看下StageMediator.as，这个东东关系到我们的View视图，与我们可以看得到的UI密切相关。我们在UI上触发的一些事件会由这个StageMediator类接收（并进行简单的封装）后发送给控制层去处理。在mouseClick事件中，又发送了一个通知，通知的消息为MOUSE_CLICK。另一个是鼠标的单击时的X方向上偏移量。看一下ApplicationFacade类中注册的信息，可以找到与消息对应的类是MouseClickCommand。在这个类中，就输出了X方向上偏移量。接下来，你只需要ctrl+enter测试就可以了。是不是很奇怪，从头到尾都没有用过Model层，是的，这可能是我这个DEMO的缺陷，因为我这个Demo中不需要查询数据库或其它数据存储区来获取或写入数据，因此并没有使用到。上面的整个过程，只起到一个简单的演示作用。如果大家需要深入学习，建议大家参考网上达人们的文章。
『柒』 有没有把网页转换成可执行文件的网页
在 HTML5的崛起、JavaScript要一统天下之际，有一个名为【跨平台】的技术越来越火。为什么会这么火？因为软件开发者只需一次编写程序，即可在 Windows、Linux、Mac、IOS、Android 等平台运行，大大降低了程序员的工作量，也使公司的产品可以快读迭代。曾经跨平台技术的不被看好，如今随着手机、电脑硬件的发展而快速发展。这一切，几乎由HTML5技术推动，当然，JavaScript 这个语言，是最大的功臣。
以上是最简单的打包方式，至于怎么修改窗口大小、菜单栏怎么加、怎么调用系统API这些，就给你慢慢去研究Electron了。
『捌』 egret发布的html5文件是什么意思为什么点不开
html5是游戏引擎，因为你导出的html5并不完整，所以导致游戏不会运行。
