it做私活的网站,做网站要偶数,合肥网站设计服务,直播营销策划方案历史小剧场 呜呼#xff01;古有匈奴犯汉#xff0c;晋室不纲#xff0c;铁木夺宋#xff0c;虏清入关#xff0c;神舟陆沉二百年有余#xff0c;中国之见灭于满清初非满人能灭之#xff0c;能有之也因有汉奸以作虎怅#xff0c;残同胞媚异种#xff0c;始有吴三桂洪承…历史小剧场 呜呼古有匈奴犯汉晋室不纲铁木夺宋虏清入关神舟陆沉二百年有余中国之见灭于满清初非满人能灭之能有之也因有汉奸以作虎怅残同胞媚异种始有吴三桂洪承畴继有曾国藩袁世凯以为厉。今率堂堂之师征讨汉贼袁氏筑共和之体或免于我子子孙孙被异族奴役。---- 《讨汉贼袁世凯檄文》 基本使用
1、初始项目
注意main: 改为 main.js
npm init2、安装electron
npm install --save-dev electron3、修改package.json
{name: electron-app-cycle,version: 1.0.0,description: ,main: main.js,scripts: {test: echo \Error: no test specified\ exit 1,start: nodemon --watch main.js --exec npm run build,build: electron .},author: ,license: ISC,devDependencies: {electron: ^30.0.1}
}4、编写main.js
const { app, BrowserWindow, ipcMain } require(electron)// 创建窗口
let mainWin null;
function createWindow() {mainWin new BrowserWindow({x: 100,y: 100,show: false,width: 1000,height: 600,maxWidth: 1000,maxHeight: 800,minWidth: 400,minHeight: 200,resizable: false, // 可缩放movable: true, // 可移动frame: true, // 无边框title: Electron 学习,icon: logo.png,// transparent: true, // 透明autoHideMenuBar: true, // 隐藏菜单栏webPreferences: {nodeIntegration: true, // 集成 NodejscontextIsolation: false, // 隔离上下文}})mainWin.loadFile(index.html)mainWin.on(ready-to-show, () {mainWin.show()})mainWin.webContents.on(dom-ready, () {console.log(22222 --- dom-ready)})mainWin.webContents.on(did-finish-load, () {console.log(33333 --- did-finish-load)})// 当前窗口关闭时触发mainWin.on(closed, () {console.log(88888 --- this window is closed)mainWin null;})
}// 监听来自渲染进程的 openListWindow 事件
ipcMain.on(openListWindow, () {const chidlWin new BrowserWindow({x: 400,y: 300,width: 400,height: 200,parent: mainWin,webPreferences: {nodeIntegration: true,}})chidlWin.loadFile(list.html)chidlWin.on(closed, () {chidlWin null})
})app.on(ready, () {console.log(11111 --- app is ready)createWindow()
})app.on(window-all-closed, () {console.log(44444 --- all windows are closed)app.quit()
})app.on(before-quit, () {console.log(55555 --- before-quit)
})app.on(will-quit, () {console.log(66666 --- will-quit)
})app.on(quit, () {console.log(77777 --- quit)
})补充知识Electron 生命周期 ready: app 初始化完成dom-ready: 一个窗口中的文本加载完成did-finish-load: 导航完成时触发window-all-closed: 所有窗口都被关闭时触发before-quit: 在关闭窗口之前触发will-quit: 在窗口关闭并且应用退出时触发quit: 当所有窗口被关闭时触发closed: 当窗口关闭时触发此时应删除窗口引用 5、编写主窗口页面 index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title/title
/head
bodyh2Electron生命周期/h2button idopen-list-window点击打开新窗口/buttonscript srcindex.js/script
/body
/htmlindex.js
const { ipcRenderer } require(electron)window.addEventListener(DOMContentLoaded, () {const btn document.getElementById(open-list-window);btn.onclick () {// 当按钮被点击时发送消息到主进程ipcRenderer.send(openListWindow)}
})补充知识 - DOMContentLoaded事件此时浏览器已经完全加载了HTML文件并且DOM树已经生成好了。但是其他外部资源比如样式文件、图片、字体等并没有加载好 - Load事件此时浏览器已经将所有的资源都加载完毕可以正确读取页面中的资源。 6、编写子窗口 list.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title新窗口/title
/head
bodydiv新窗口/div
/body
/html运行
npm run startElectron案例
