electron打包整理
最近在折腾把项目打包成桌面应用程序,发现一个工具electron,可以讲项目打包成一个跨平台的应用程序,很方便,来学习一下。
1、先安装electron、electron-packager,安装方法可以使用package.json文件配置,然后npm install
也可以使用cnpm安装,速度会快点,具体如下:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i
package.json如下:
{
"name": "electron_demo",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ stockschool --platform=win32 --arch=x64 --icon=./pazq.ico --out=./ElectronApp"
},
"devDependencies": {
"electron": "~1.7.8",
"electron-packager": "^10.1.2"
},
"dependencies": {}
}
2、安装完成后,准备好要打包的项目,并增加一个main.js,用来声明一个类似webview的东西,来加载页面。
const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow 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 mainWindow function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: ,
height: ,
minWidth: , // Integer (可选) - 窗口的最小宽度, 默认值为 .
minHeight: , // Integer (可选) - 窗口的最小高度. 默认值为 .
maxWidth: , // Integer (可选) - 窗口的最大宽度, 默认无限制.
maxHeight: , // Integer (可选) - 窗口的最大高度, 默认无限制.
minimizable: true, // Boolean (可选) - 窗口是否可以最小化. 在 Linux 中无效. 默认值为 true.
maximizable: false, // Boolean (可选) - 窗口是否可以最大化动. 在 Linux 中无效. 默认值为 true.
useContentSize: false, // width 和 height 将使用 web 页面的尺寸
center: true, // Boolean (可选) - 窗口在屏幕居中.
})
mainWindow.setMenu(null) // and load the index.html of the app.
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './stockschool/index.html'),
protocol: 'file:',
slashes: true
}))
// 加载应用的 index.html
// mainWindow.loadURL('file://' + __dirname + '/index.html'); // Open the DevTools. // 打开开发工具 mainWindow.openDevTools();
// mainWindow.webContents.openDevTools() // Emitted when the window is closed.
mainWindow.on('closed', function () {
// 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.
mainWindow = 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', function () {
// On OS X 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', function () {
// On OS X 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 (mainWindow === 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.
3、启动项目:
npm start
4、打包,根据平台打包成一个.exe文件。(导出目录见 package.json中的out配置项)
打包方法:cnpm run packager
package.json中的打包配置
electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本>
electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=./pazq.ico --out=./ElectronApp --version=0.0.1
electron打包整理的更多相关文章
- Electron 打包时下载 xxx-electron-v1.6.8--x64.zip 文件出错
Electron 打包时下载 xxx-electron-v1.6.8--x64.zip 文件出错 今天在windows上打包其它平台的Electron应用的时候,由于是第一次,所以总是下载 xxx-e ...
- electron打包分发
原始的方式打包 下载对应的版本号的Release Electron 然后把对应的项目方便整理成这样的目录结构(Windows下) node_modules重新安装,不然可能启动失败 把整文件夹给别人就 ...
- electron打包发布
1.全局安装electron npm install electron -g 在cmd 直接输入 electron 直接启electron 2.编写第一个Electron应用 在任何地方,建立一个ap ...
- 记一次使用Node.js electron打包网站的记录
具体步骤请参考:http://blog.csdn.net/a727911438/article/details/70834467 打包时出现了不少问题,逐一记录下来以供其他人参考. package.j ...
- Electron 打包Mac安装包代码签名问题解决方案Could not get code signature for running application
最近一直在做electron应用的打包,集成mac版本的自动更新时出现了问题. Error: Could not get code signature for running application ...
- electron打包vue项目
electron是什么 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并 ...
- electron打包之真的恶心
用electron-packager进行打包 这个模块的文档写的真的垃圾 1.先看看首页的参数介绍 就是说必选参数就是源码路径和app名字和--platform还有--arch咯,而且源码路径也没说是 ...
- electron打包成桌面应用程序的详细介绍
1.前提条件 a. 安装了node b.安装了electron c.你知道自己写的东西(js,css,html等等)放在那个文件夹(假设这个文件夹命名为 app,下面会用到)中 2.安装electro ...
- 将现有vue项目基于electron打包成桌面应用程序
一.前言 项目本来打算采用B/S架构去做的,浏览器网址方式打开还是让用户不方便: 二.使用electron集成桌面应用 本身项目是使用vue-cli开发的,在使用electron之前,需要将本身的项目 ...
随机推荐
- python绘图入门
python绘图入门 学习了:https://zhuanlan.zhihu.com/p/34200452 API:https://matplotlib.org/api/pyplot_api.html ...
- 转: eclipse 快捷键列表(功能清晰版本)
转自: http://www.uml.org.cn/mobiledev/201110092.asp Eclipse 在开发中使用到的快捷键很实用噢 Ctrl+1 快速修复(最经典的快捷键,就不用多说了 ...
- easyui英文提示变中文
近期玩JQuery easyUI,系统默认的日期和文本输入框提示英文.作为一个地道的中国人,是不是提示成中文.日期也显示成中文,是不是更人性化呢,下面为操作方法哦. 更改前效果 1 输入框提示为英文 ...
- Native进程之Trace原理(转)——可直接输出某进程的栈帧——debuggerd
一. 概述 当发生ANR(Application Not Response,对于Java进程可通过kill -3向目标进程发送信号SIGNAL_QUIT, 输出相应的traces信息保存到目录/dat ...
- mina客户端与服务端通信的易错点
使用mina进行项目开发时,如果客户端与服务端不在同一个项目下,需要关注一下两点: 第一.服务端与客户端的编码解码器一致 第二.过程中所用到的实体类的包名需要一致
- HDU 3469 Catching the Thief (博弈 + DP递推)
Catching the Thief Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- 【iOS9系列】- CoreSportlight内容索引的使用
[iOS9系列]- CoreSportlight内容索引的使用 前言 在iOS9中新增加了的CoreSportlight内容索引,这个还是比较实用的,当我们的App比较多的时候,我们会实用iOS系统的 ...
- ASP.NET MVC中为DropDownListFor设置选中项的方法
在MVC中,当涉及到强类型编辑页,如果有select元素,需要根据当前Model的某个属性值,让Select的某项选中.本篇只整理思路,不涉及完整代码. □ 思路 往前台视图传的类型是List< ...
- cocos2d-x调用scheduleUpdate()不执行update()方法的解决办法【转】
原文地址:http://blog.csdn.net/somestill/article/details/9699377 前两天使用到每帧都更新动画的scheduleUpdate()方法,但通过cclo ...
- Ubuntu x86 64 settup nginx rtmp server
常常搭建nginxserver,可是好像每次的情况都不同,这次具体记录这个过程: 平台:unbutu 10.04 内核:2.6.32-33-generic 1, 编译环境搭建. sudo apt-ge ...