electron打包成exe的方法

前端 · guoman · 于 5天前 发布 · 21 次阅读

​         Electron 是由 Github开发的开源框架,它允许开发者使用Web技术构建跨平台的桌面应用。electron是通过将Chromium和Node.js合并到同一个运行时环境中,用html,css,JavaScript来构建跨平台桌面应用的一个开源库,并将其打包为Mac,Windows和linux系统下的应用来实现这一目的。

Electron = Chromium + Node.js + Native API

Chromium : 为Electron提供了强大的UI能力,可以不考虑兼容性的情况下,利用强大的Web生态来开发界面。 Node.js :让Electron有了底层的操作能力,比如文件的读写,甚至是集成C++等等操作,并可以使用大量开源的npm包来完成开发需求。 Native API : Native API让Electron有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘这些。

基于HTML5的跨平台技术比较出名的有 PhoneGap、Cordova,常常用于开发webapp

Egret、Cocos-creator、Unity等,常用于开发游戏;

基于node的nw.js,用于开发桌面应用;

Electron,一款比nw.js还强大的用网页技术来开发桌面应用的神器。

准备工作:

1、全局安装打包工具 electron-packager 要求:Electron Packager require Node >=10.12.0 2、打包前为当前app制作icon:icon.ico,256*256。制作好放入app根目录。 electron-packager打包:electron-packager打包有两种方式,一是直接在命令行编辑命令,直接进行打包。另一种是在package.json里编辑package,执行npm run-script package。

此文是直接在命令行打包

electron打包成exe的步骤如下:

1.安装node.js Node.js 中文网

2.全局安装electron

npm install electron-packager -g

3.创建目录         找到你前端页面的文件夹,package.json、main.js、index.html三个文件(当然也可以npm init创建),这个index.html就是你的网页首页。

项目结构

├── package.json
├── main.js
└── index.html

(1)package.json内容

{
  "name": "app-name",
  "version": "0.1.0",
  "main": "main.js",
  "dependencies": {
    "electron-packager": "^12.2.0"
  }
}

(2)main.js内容

var  {app, BrowserWindow} = require('electron');
var path = require('path');
var 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.
var win;
function createWindow () {
    // Create the browser window.
    win = new BrowserWindow({width: 1080, height: 1920,frame:false});
    win.setFullScreen(true);

    // and load the index.html of the app.
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));

    // win.once('ready-to-show', () => {
    //     win.show()
    // })

    // 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 devare the corresponding element.
        win = null
});
    // require('electron').webFrame.setZoomLevelLimits(1,1);
}
// 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', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    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 + Q
    if (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.打开当前目录命令行 打包方式一:命令行直接打包

 electron-packager ./ map --platform=win32 --out=release --arch=ia32 --electron-version=1.8.4 --overwrite

资料如下:执行命令electron-packager --help或者访问官网查看所有可配置参数。

参数说明:  map :你将要生成的exe文件的名称 –platform=win32:确定了你要构建哪个平台的应用(Windows、Mac 还是 Linux),可取的值有 darwin, linux, mas, win32 –arch=x64:决定了使用 x86 (ia32)还是 x64(x64),还是两个架构都用 –icon=自定义.ico:自定义设置应用图标 –out=./out:指定打包文件输出的文件夹位置,当前指定的为项目目录下的release文件夹 –asar:该参数可以不加,如果加上,打包之后应用的源码会以.asar格式存在 –app-version=1.0.0:生成应用的版本号 –overwrite:覆盖原有的build,让新生成的包覆盖原来的包 –ignore=node_modules:如果加上该参数,项目里node_modules模块不会被打包进去 –electron-version 8.2.1:指定当前要构建的electron的电子版本(不带"v"),需要和当前的版本一致,具体可以在 package.json文件中查看,可以不加该参数,如果不一致,会自动下载。

还可以使用asar对resources文件进行简单加密

汇总:

electron-packager . helloWorld --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules --electron-version 8.2.1

打包方式二:在package.json文件中配置

在package.json文件中配置参数打包

命令较长,每次打包都需要输入很麻烦,可以把命令配置到package.json文件中scripts属性中:

"scripts": {
    "package":"electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules"
}

或者

"scripts": {
  "start": "electron .",
  "packager": "electron-packager . fukaiitapp --out fukaiitapp --arch=x64 --overwrite --ignore=node_modules"
},

然后在命令行中输入:

npm run package

package.json的配置如下,仅供参考:

通过以上两种方式都可进行打包,选择一种即可。 出现以下信息,表示打包完成,并且在根目录下多出out文件夹。(多出自定义名称的文件夹,此处是out文件夹)

 

 打开map.exe即可运行

 resourse文件夹存放源代码,若不想人查看源代码,可在打包时加上asar,用来对resources文件进行简单加密

注意事项:

  1. 采用通用方法引入jQuery并不报错,但是不起任何作用,具体表现为"$"符号无法选中dom,原因是node环境中某些变量与jQuery中产生冲突。解决方法:

(1)引入js时,代码如下:

<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

<!-- normal script imports etc  -->
<script src="scripts/jquery.min.js"></script>    
<script src="scripts/vendor.js"></script>    

<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

(2)尽量不要有多个main.js,否则打包之后js可能失效,因为配置文件main.js与之冲突

2.打开APP之后发现白屏,有可能报错啦,但是有没有办法调试。调试的方法有很多种,具一种最简单的,就是在main.js中添加这个代码,这个一定要添加在ready这个方法之前。它会监听8315这个端口,然后打开可以看到调试器信息。

const app = require('electron').app;
app.commandLine.appendSwitch('remote-debugging-port', '8315');
app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1');

app.on('ready', function() {
  // Your code here
});

3.尽量不要在win10 C盘中打包,可能会有问题

本文由 guoman 创作,采用 知识共享署名 3.0 中国大陆许可协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。

共收到 0 条回复
没有找到数据。
添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册