河北云网站建设,怎么让别人找你做网站,设计图纸网站,二级域名前缀大全Electron基础学习笔记
官网#xff1a; https://www.electronjs.org/ 文档#xff1a;https://www.electronjs.org/zh/docs/latest/
Electon概述
Electron 是由 Github开发的开源框架它允许开发者使用Web技术构建跨平台的桌面应用 Electron Chromium Node.js Native AP…Electron基础学习笔记
官网 https://www.electronjs.org/ 文档https://www.electronjs.org/zh/docs/latest/
Electon概述
Electron 是由 Github开发的开源框架它允许开发者使用Web技术构建跨平台的桌面应用 Electron Chromium Node.js Native APIChromium : 为Electron提供了强大的UI能力可以不考虑兼容性的情况下利用强大的Web生态来开发界面。Node.js 让Electron有了底层的操作能力比如文件的读写甚至是集成C等等操作并可以使用大量开源的npm包来完成开发需求。Native API Native API让Electron有了跨平台和桌面端的原生能力比如说它有统一的原生界面窗口、托盘这些。
什么时候使用Electron
公司没有专门的桌面应用开发者而需要前端兼顾来进行开发时用Electron就是一个不错的选择。一个应用同时开发Web端和桌面端的时候那使用Electron来进行开发就对了。开发一些效率工具比如说我们的VSCode比如说一些API类的工具用Electron都是不错的选择。
有哪些著名应用是用Electron开发的
VSCode 程序员最常用的开发者工具。Atom : 是Github开发的文本编辑器我想大部分的前端程序员都应该使用过。slack 聊天群组 大规模工具集成 文件整合 搜索的一个工具。就是把很多你常用的工具整合到了一起。wordPress 基于PHP开发的Blog搭建工具新版本使用了Electron.
Electron的Hello World案例
安装Electron
#项目内安装
npm install electron --save-dev
# 全局安装:
npm install -g electron这个如果安装失败可以多安装两遍也可以使用cnpm来进行安装。
新建index.html文件
新建一个文件夹比如叫ElectronDemo01.
在项目的根目录中新建一个index.html文件然后编写如下的代码(可以用快速生成的方式来写这段代码)。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyHello World!
/body
/html新建main.js文件
在根目录下新建一个main.js文件这个就是Electron的主进程文件。
var electron require(electron) //引入electron模块var app electron.app // 创建electron引用var BrowserWindow electron.BrowserWindow; //创建窗口引用var mainWindow null ; //声明要打开的主窗口
app.on(ready,(){mainWindow new BrowserWindow({width:400,height:400}) //设置打开的窗口大小mainWindow.loadFile(index.html) //加载那个页面//监听关闭事件把主窗口设置为nullmainWindow.on(closed,(){mainWindow null})})创建package.json文件
写完后直接使用npm init --yes来初始化package.json文件文件生成后如下
{name: ElectronDemo1,version: 1.0.0,description: ,main: main.js,scripts: {test: echo \Error: no test specified\ exit 1},keywords: [],author: ,license: ISC
}这时候main的值为main.js就正确了。这时候就可以打开终端在终端里输入electron .就可以打开窗口了。 若是在创建项目的时候就生成json文件,main对应的会是index.js,但是现在的话会生成main.js 运行:
electron.cmd .
# 注意,后面有一个 .Electron的运行流程
1.读取package.json的中的入口文件(main定义的文件),这里我们是main.js2.main.js 主进程中创建渲染进程(loadFile)3.读取应用页面的布局和样式4.使用IPC在主进程执行任务并获取信息
我们可以理解package.json中定义的入口文件就是主进程,那一般一个程序只有一个主进程,而我们可以利用一个主进程,打开多个子窗口. 由于 Electron 使用了 Chromium 来展示 web 页面所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中,也就是我们说的渲染进程. 也就是说主进程控制渲染进程,一个主进程可以控制多个渲染进程.
案例2
在项目根目录下建立一个xiaojiejie.txt的文件,然后写入几个小姐姐的名字.
代码如下:
1.麻里梨夏
2.星野娜美
3.高桥圣子因为要使用node里的fs模块,所以在设置窗口时,增加全量使用node.js.
var electron require(electron)var app electron.appvar BrowserWindow electron.BrowserWindow;var mainWindow null ;
app.on(ready,(){mainWindow new BrowserWindow({width:500,height:500,webPreferences:{ nodeIntegration:true} //设置全局使用node.js})mainWindow.loadFile(index.html)mainWindow.on(closed,(){mainWindow null})})到index.html里边写一下界面.这里我们写了一个按钮,然后在按钮下方加一个div,这个DIV用来作读取过来内容的容器.
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, idivnitial-scale1.0titleDocument/title
/head
body!-- 点击按钮,获取信息 --Button idbtn小姐姐请进来/Buttonbr/div idmybaby/divscript srcrenderer/index.js/script/body
/html新建一个renderer文件夹,在文件里新建index.js,再index.html页面里先进行引入. 编写index.js里的代码
var fs require(fs); //引入node.js(需要在main.js中全局引入:webPreferences:{ nodeIntegration:true})
window.onload function(){//监听页面var btn this.document.querySelector(#btn) //获取按钮var mybaby this.document.querySelector(#mybaby) //获取显示的divbtn.onclick function(){ //点击按钮监听fs.readFile(xiaojiejie.txt,(err,data){ //读取文件(默认项目根目录)mybaby.innerHTML data //赋值})}
}Electron Remote模块的使用
Electron有主进程和渲染进程,Electron的API方法和模块也是分为可以在主进程和渲染进程中使用.如果想在渲染进程中使用主进程中的模块方法时可以使用Electron Remote解决在渲染和主进程间的通讯。 新建一个demo2.html文件然后快速生成html的基本结构编写一个按钮引入渲染的js页面。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyButton idbtn打开新的窗口/Buttonbr/script srcrenderer/demo2.js/script
/body
/html在render文件夹下新建一个demo2.js文件然后编写如下代码。 const btn this.document.querySelector(#btn)const BrowserWindow require(electron).remote.BrowserWindowwindow.onload function(){btn.onclick (){newWin new BrowserWindow({width:500,height:500,})newWin.loadFile(yellow.html)newWin.on(close,(){winnull})}
}yellow.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, idivnitial-scale1.0titleDocument/title
/head
bodyyellow
/body
/html创建菜单和基本使用
编写菜单模板
在Electron中编写菜单需要先建立一个模板这个目标很类似我们JSON或者类的数组。 我们打开项目在项目的根目录下新建一个文件夹main意思是主进程中用到的代码我们都写到这里。 然后新建一个menu.js文件,然后编写如下代码。
//放所有菜单的操作
const { Menu,BrowserWindow } require(electron)
//所有的菜单
var template [{label:凤来怡洗浴会所,//菜单submenu:[//子菜单{label:精品SPA,click:(){ //设置点击事件,使用的是electron的功能win new BrowserWindow({//创建新窗口width:500,height:500,webPreferences:{ nodeIntegration:true}})win.loadFile(yellow.html)win.on(closed,(){//监听关闭事件win null})}},{label:泰式按摩}]},{label:大浪淘沙洗浴中心,submenu:[{label:牛奶玫瑰浴},{label:爱情拍拍手}]}
]
//构建菜单模板
var m Menu.buildFromTemplate(template)
//设置菜单模板
Menu.setApplicationMenu(m)然后再打开主进程main.js文件在ready生命周期中直接加入下面的代码就可以实现自定义菜单了。 require(./main/menu.js) //在引入页面之前加,比如:var electron require(electron) //引入electron模块var app electron.app // 创建electron引用var BrowserWindow electron.BrowserWindow; //创建窗口引用var mainWindow null ; //声明要打开的主窗口
app.on(ready,(){mainWindow new BrowserWindow({width:400,height:400,webPreferences:{ nodeIntegration:true}//全局引用node.js}) //设置打开的窗口大小//----------------------require(./main/menu.js)//引入自定义的菜单//------------------------mainWindow.loadFile(demo2.html) //加载那个页面,使用新页面//监听关闭事件把主窗口设置为nullmainWindow.on(closed,(){mainWindow null})})注意:Menu属于是主线程下的模块所以只能在主线程中使用。 绑定快捷键
绑定快捷键的属性是accelerator属性比如我们新打开一个窗口我们就的代码可以写成这样。
accelerator:ctrln例如:
const { Menu ,BrowserWindow} require(electron)
var template [{label:凤来怡洗浴会所,submenu:[{label:精品SPA,accelerator:ctrln, //设置快捷键click:(){win new BrowserWindow({width:500,height:500,webPreferences:{ nodeIntegration:true}})win.loadFile(yellow.html)win.on(closed,(){win null})}},{label:泰式按摩}]},{label:大浪淘沙洗浴中心,submenu:[{label:牛奶玫瑰浴},{label:爱情拍拍手}]}chengxu
]
var m Menu.buildFromTemplate(template)
Menu.setApplicationMenu(m)右键菜单
右键菜单的响应事件是写在渲染进程中的也就是写在index.html中的所以要是使用就用到到remote模块进行操作了。
打开render文件夹然后打开demo2.js文件编写一个右键菜单的监听事件
window.addEventListener(contextmenu,function(){alert(111);
})例如
const btn this.document.querySelector(#btn)
const BrowserWindow require(electron).remote.BrowserWindow //window.onload function(){btn.onclick (){//点击按钮,打开一个窗口,打开页面newWin new BrowserWindow({width:500,height:500,})newWin.loadFile(yellow.html)newWin.on(close,(){winnull})}
}
//监听右键点击事件-------------
window.addEventListener(contextmenu,function(){alert(111);
})当我们要使用Menu模块,它是主线中的模块如果想在渲染线程中使用就必须使用remote。
//引入remote就可以使用了
const { remote} require(electron)
//右键的菜单
var rigthTemplate [{label:粘贴,accelerator:ctrlc},//菜单,快捷键{label:复制}
]
//声明菜单
var m remote.Menu.buildFromTemplate(rigthTemplate)
//监听右键点击事件-------------
window.addEventListener(contextmenu,function(e){//阻止当前窗口默认事件e.preventDefault();//把菜单模板添加到右键菜单,弹出右键菜单m.popup({window:remote.getCurrentWindow()})})打开调试模式
由于我们已经定义了顶部菜单没有了打开调试模式的菜单了这时候可以使用程序来进行打开。在主进程中加入这句代码就可以了。
mainWindow.webContents.openDevTools()全部代码如下:
var electron require(electron) var app electron.app var BrowserWindow electron.BrowserWindow;var mainWindow null ;
app.on(ready,(){mainWindow new BrowserWindow({width:500,height:500,webPreferences:{ nodeIntegration:true}})mainWindow.webContents.openDevTools() //打开调试模式require(./main/menu.js)mainWindow.loadFile(demo2.html)mainWindow.on(closed,(){mainWindow null})})这样就实现了打开窗口直接进入调试模式极大的提高了调试效率。
Electron 中使用shell通过链接打开浏览器
在渲染进程中默认加入一个a标签进行跳转默认是直接在窗口中打开而不是在浏览器中打开的如果我们想在默认浏览器中打开要使用electron shell在浏览器中打开链接。
案例:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1!-- 在窗口中直接打开 --a hrefhttps://jspang.com技术胖的博客/a!-- 使用浏览器打开 --a idaHref hrefhttps://jspang.com技术胖的博客/a/h1script src./renderer/demo3.js/script
/body
/html如果想使用浏览器打开我们可以直接在a标签中加入id,然后在render文件夹下新建一个demo3.js文件先在文件首页中引入shell,然后编写响应事件click。
var { shell } require(electron) //需要使用的是shellvar aHref document.querySelector(#aHref)aHref.onclick function(e){e.preventDefault() //组织默认行为var href this.getAttribute(href) //获取连接shell.openExternal(href) //打开连接
}Electron 中嵌入网页和打开子窗口
用BrowserView来嵌入一个网页到应用中这很类似Web中的iframe标签。需要注意的是BrowserView是主进程中的类所以只能在主进程中使用。
在主进程中用BrowserView嵌入网页
打开根目录下打开main.js,直接引入并使用BrowserView就可以实现键入网页到应用中。
var BrowserView electron.BrowserView //引入BrowserView
var view new BrowserView() //new出对象
mainWindow.setBrowserView(view) // 在主窗口中设置view可用
view.setBounds({x:0,y:100,width:1200, height:800}) //定义view的具体样式和位置
view.webContents.loadURL(https://jspang.com) //wiew载入的页面例如:
var electron require(electron) //引入electron模块var app electron.app // 创建electron引用var BrowserWindow electron.BrowserWindow; //创建窗口引用var mainWindow null ; //声明要打开的主窗口
app.on(ready,(){mainWindow new BrowserWindow({width:400,height:400,webPreferences:{ nodeIntegration:true}//全局引用node.js}) //设置打开的窗口大小mainWindow.webContents.openDevTools() //打开调试模式require(./main/menu.js)//引入自定义的菜单mainWindow.loadFile(demo3.html) //加载那个页面,使用新页面//---------嵌入网页----------var BrowserView electron.BrowserView //引入BrowserViewvar view new BrowserView() //new出对象mainWindow.setBrowserView(view) // 在主窗口中设置view可用view.setBounds({x:0,y:100,width:1200, height:800}) //定义view的具体样式和位置view.webContents.loadURL(https://jspang.com) //wiew载入的页面//----------------//监听关闭事件把主窗口设置为nullmainWindow.on(closed,(){mainWindow null})})用window.open打开子窗口
以前使用过BrowserWindow,这个是有区别的, 通常把window.open打开的窗口叫做子窗口。 关闭父窗口,会同时关闭子窗口
在demo3.html中加入一个按钮代码如下 button idmybtn 打开子窗口/button然后打开demo3.js,先获取button的DOM节点然后监听onclick事件代码如下
var mybtn document.querySelector(#mybtn)mybtn.onclick function(e){window.open(https://jspang.com)
}这样就完成了子窗口的打开。
Electron Window.open子窗口和父窗口间的通信
window.opener.postMessage(message,targetOrigin),是将消息发送给指定来源的父窗口如果未指定来源则发送给*即所有窗口。
message : 传递的消息是String类型的值targetOrigin : 指定发送的窗口
在传递消息时你需要在子窗口的页面中设置一些内容所以我们不能使用远程的页面而需要自己建立一个。
案例
在项目根目录建立一个popup_page.html文件。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh2我是弹出子窗口/h2button idpopBtn向窗口传递信息/button
/body
scriptvar popBtn this.document.querySelector(#popBtn)popBtn.onclick function(e){//window.opener.postMessage 子窗口向父窗口传递消息window.opener.postMessage(我是子窗口的消息)}
/script
/html父窗口接受消息
先打开demo3.html,在代码最下面加一个div标签记得要给一个ID这样就用JS控制这个层了。
div idmytext/div !-- 接收子窗口数据 --父窗口接收信息需要通过window.addEventListener,例如现在我们打开demo3.js也就是父窗口的JS代码部分写入下面代码
window.addEventListener(message,(msg){let mytext document.querySelector(#mytext)mytext.innerHTML JSON.stringify(msg)
})这样父窗口就可以顺利接收到子串口发送过来的信息了也可以轻松的显示在子窗口中。 {isTrusted:false,data:我是子窗口的消息,origin:file://,source:{location:{href:file:///D:/data/electron/demo01/popup_page.html,hash:,host:,hostname:,origin:file://,pathname:/D:/data/electron/demo01/popup_page.html,port:,protocol:file:,search:},closed:false}}Electron 选择文件对话框showOpenDialog
打开文件选择对话框可以使用dialog.showOpenDialog()方法来打开它有两个参数一个是设置基本属性另一个是回调函数如果是异步可以使用then来实现。
title String (可选)对话框的标题defaultPath String (可选),默认打开的路径buttonLabel String (可选), 确认按钮的自定义标签当为空时将使用默认标签filters 文件选择过滤器定义后可以对文件扩展名进行筛选properties打开文件的属性比如打开文件还是打开文件夹甚至是隐藏文件。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton idopenBtn打开文件/buttonimg src idimages
/bodyscript//引入dialogconst {dialog} require(electron).remotevar openBtn document.getElementById(openBtn);openBtn.onclick function(){//打开文件选择对话框dialog.showOpenDialog({title:请选择你喜欢的小姐姐照片 , //弹窗名:左上角defaultPath:./img/1.jpg, //默认路径的设置,是一个文件(默认根目录)filters:[ //过滤器{name:只jpg,extensions:[jpg,png]},{name:png,extensions:[png]}],buttonLabel:打开图片, //自定义}).then(result{let image document.getElementById(images)image.setAttribute(src,result.filePaths[0]);console.log(result)}).catch(err{console.log(err)})}/script/html文件保存对话框showSaveDialog
dialog.showSaveDialog()
button idsaveBtn保存文件/button//保存文件const fs require(fs) //流处理var saveBtn document.getElementById(saveBtn)saveBtn.onclick function(){dialog.showSaveDialog({ //打开保存title:保存文件,}).then(result{console.log(result)fs.writeFileSync(result.filePath,技术胖一个前端爱好者)//将字符串写入选择的位置(需要包含文件名)}).catch(err{console.log(err)})}Electron 消息对话框的操作showMessageBox
showMessageBox 相关属性
type String类型可以选图标样式有none、info、error、question和warningtitle: String类型弹出框的标题messsage : String 类型必选 message box 的内容这个是必须要写的buttons: 数组类型在案例中我会详细的讲解返回的是一个索引数值下标
案例:制作一个确认对话框
button idmessageBtn弹出对话框/buttonvar messageBtn document.getElementById(messageBtn)messageBtn.onclick function(){dialog.showMessageBox({type:warning,title:去不去由你,message:是不是要跟胖哥去红袖招?,buttons:[我要去,不去了]}).then(result{console.log(result)})}回调中result里有一个response这个里会给我们返回按钮的数组下标。
Electron 断网提醒功能制作
桌面客户端的程序都必备的一个功能是判断网络状态这个其实可以用window.addEventListener来进行时间监听。
其实这个是JavaScript的一种方式进行监听网络状态,监听的事件分别是online和offline。
online : 如果链接上网络就会触发该事件。offline : 如果突然断网了就会触发该事件。
新建一个文件比如叫作demo5.html文件然后编写下面的代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh2 JSPang.com 断网提醒测试 /h2
/body
scriptwindow.addEventListener(online,function(){alert(官人我来了我们继续哦)})window.addEventListener(offline,function(){alert(小女子先行离开一会请稍等)})
/script
/html这样我们就完成了基本的网络情况监控小伙伴们可以在终端中输入electron . 预览效果。 Electron 底部通知消息的制作
Electron的消息通知是通过H5的window.Notification来实现的。
window.Notification的属性参数
title: 通知的标题可以显示在通知栏上option: 消息通知的各种属性配置以对象的形式进行配置。
点击按钮提示消息
当我们点击一个按钮时会自动弹出提示消息告诉我们有新的订单。 新建一个demo5.html然后编写如下代码。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodybutton idnotifyBtn通知消息/button
/body
scriptvar notifyBtn document.getElementById(notifyBtn);var option {title:小二,来订单了出来接客了!,body:有大官人刚翻了你的牌子,}notifyBtn.onclick function(){new window.Notification(option.title,option)}
/script
/htmlElectron注册全局快捷键
全局快捷键模块就是globalShortcut意思就是我们打开软件以后按键盘上的快捷键就可以实现用快捷键实现特定的功能相当于用键盘快捷键触发某些事件。
注册快捷键
globalShortcut是主进程中的模块而且注册的都是全局的快捷键所以你尽量写在main.js中。打开main.js然后先引入globalShortcut代码如下
var globalShortcut electron.globalShortcut引入后我们现在的需求是按快捷键ctrle键后打开我的博客https://jspang.com。这时候使用globalShortcut.register方法就可以实现. 这里需要注意的是注册全局的快捷键必须在ready事件之后才能注册成功。
检测快捷键是否注册成功
可以使用globalShortcut.isRegistered()方法来检测快捷键是否注册成功因为你可能同时打开很多软件它们已经占用了一些快捷键的组合所以并不是你100%可以注册成功的。如果你在实际开发中可能当有冲突时软件是支持可以修改快捷键。
注销快捷键
因为我们注册的是全局的快捷键所以当我们关闭软件或者窗口时记得一定要注销我们的快捷键。防止关闭后打开其他软件和他们的快捷键冲突。 //注销全局快捷键的监听globalShortcut.unregister(ctrle)
//全部注销globalShortcut.unregisterAll()案例
var electron require(electron) var app electron.app
var globalShortcut electron.globalShortcut //全局快捷键var BrowserWindow electron.BrowserWindow; var mainWindow null ;
app.on(ready,(){mainWindow new BrowserWindow({width:800,height:600}) globalShortcut.register(ctrle,(){ //定义全局快捷键mainWindow.loadURL(https://jspang.com) })//检测快捷键是否注册成功let isRegister globalShortcut.isRegistered(ctrle)?Register Success:Register failconsole.log(-------isRegister)mainWindow.loadFile(test.html) //监听关闭事件把主窗口设置为nullmainWindow.on(closed,(){mainWindow null})})
//关闭主窗口的监听
app.on(will-quit,function(){//注销全局快捷键的监听globalShortcut.unregister(ctrle)//全部注销globalShortcut.unregisterAll()})Electron 剪贴板事件的使用
在开发中我们经常会遇到给用户一个激活码然后让用户复制粘贴的情况这时候就需要用到clipboard模块也就是我们的剪贴板模块。
复制激活码功能实现
现在要作一个激活码然后旁边放一个按钮点击按钮就可以复制这个激活码你可以把激活码复制到任何地方。 先新建一个页面demo7.html,然后在里边先写相关的html代码。再里边放入一个文字的激活码然后放入一个按钮。 然后编写script标签首先分本获取span标签的DOM然后再获取button的DOM,然后点击button时触发事件把内容复制到剪贴板中。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodydiv激活码span idcodejspangcom1234234242/spanbutton idbtn复制激活码/button/divscriptconst { clipboard } require(electron);const code document.getElementById(code);const btn document.getElementById(btn);btn.onclick function () {//写入剪切板clipboard.writeText(code.innerHTML);alert(复制成功);};/script/body
/html这时候就可以进行预览了如果提示你的require没找到记得在main.js中加入这句话。
mainWindow new BrowserWindow({width:800,height:600,webPreferences:{ nodeIntegration:true}
})这个就是允许在Electron中使用node现在就应该可以了。
退出按钮
main.js
const {app, BrowserWindow, Menu,ipcMain} require(electron) //使用app和ipcMainipcMain.on(close,(){app.quit()
})html引入的js
const ipc require(electron).ipcRenderer
/*关闭程序*/
function closeApp(){ipc.send(close);
}页面调用这个方法即可
Electorn应用打包
当我们使用了Electron开发完应用后一定想着如何打包成exe文件打包的方式有很多甚至根据你使用不同的前端框架打包方式也会有所不同。这里我们就学习原汁原味的打包方式,用electron-package打包。
安装electron-packager
定位到项目根目录下然后使用npm来安装electron-packager当然你也可以使用yarn来进行安装
//npm
npm install electron-packager --save-dev
//yarn
yarn add electron-packager --dev在工作中我习惯于用yarn来进行安装。安装完成后会在package.json文件中看到如下代码
devDependencies: {electron-packager: ^14.2.1}从代码中可以看出我目前的版本是14.2.1
第一种打包方法不建议
第一种打包方法就是直接在命令行中输入electron-packager,然后后边跟着6个打包参数这种方法太难了。
electron-packager location of project name of project platform architecture electron version optional options参数说明
location of project : 项目所在路径name of project : 打包的项目名称platform : 确定了你要构建哪个平台的应用Windows、Mac还是Liuxarchitecture: 决定了使用x86还是x64还是两个架构都需要electron version: electron 的版本optional options: 可选选项
这个命令太长了每次要是都用这个命令来打包会很烦所以推荐使用第二种方法
第二种打包方法
打开package.json文件在scripts下添加代码
packager: electron-packager ./ HelloWorld --all --out ./outApp --overwrite --icon./app/img/icon/icon.ico在项目中新建outAPP文件夹。
使用npm run-script packager就可以进行打包了打包的时间会非常长而且如果你安装了一些安全软件还要时刻看着安全软件的禁止操作如果不小心被禁止掉了可能会造成打包的失败。 参考: https://jspang.com/detailed?id62
