关于electron

用js调用apis来创造桌面应用，他专注于桌面应用而不是Web服务器
主要目录结构
|----- package.json
├── main.js(主要的)
└── index.html（展示的）

app.on(‘window-all-closed’, function() {}）所有窗口关闭时
app.on(‘ready’, function() {}）当electron完成初始化并创建浏览器窗口的时候
mainWindow.on(‘closed’, function() {}）当 window 被关闭，这个事件会被发出
。。。还有好多

dockMenu=Menu.buildFromTemplate([])
app.dock.setMenu（dockMenu） 来设置你的菜单
app.setUserTasks([{},{}]) 来设置用户任务 传入空值时会清空任务列表
let win = new BrowserWindow({})
win.setThumbarButtons([{},{}])来设置缩略图工具
win.setProgressBar(0.5) 在unity运行器上显示进度条
window.setRepresentedFilename(’/etc/passwd’);
window.setDocumentEdited(true); 展示文件弹窗

electron在线、离线事件探测（navigator.onLine只有在脱机时才返回false其他都是true没法准确判断）

electron进程（electron中的process对象）
一个进程是计算机程序执行中的一个实例。
Electron 应用同时使用了 main (主进程) 和一个或者多个 renderer （渲染进程）来运行多个程序
。在 Node.js 和 Electron 里面，每个运行的进程包含一个 process 对象。这个对象作为一个全局的提供当前进程的相关信息，操作方法。作为一个全局变量，它在应用内能够不用 require() 来随时取到。
process.once(‘loaded’, function() {}）在Electron已经加载了其内部预置脚本和它准备加载主进程或渲染进程的时候触发
process.hang()使当前进程的主线程挂起.
这个process相当于html里的windows

运行electron.exe，Electron 就会以你的应用程序的方式启动。electron 文件夹将被部署并可以分发给最终的使用者
将应用程序打包成一个文件
，打包应用程序为一个asar库文件避免暴露你的源代码
通过重新编译打包，来重命名electron名称

向APPstore提交向导
从apple获得证书、使用 Application Distribution 打包你的应用、准备好child.plist和parent.plit
两个授权文件、上传你的应用并检查提交

IPC 代表 Inter-Process Communication。Electron 使用 IPC 来在 [主进程] 和 [渲染进程] 之间传递 JSON 信息。

V8 是谷歌公司的开源的 JavaScript 引擎

main process主进程，通常是值 main.js 文件，是每个 Electron 应用的入口文件。
它控制着整个 APP 的生命周期，从打开到关闭。
它也管理着原生元素比如菜单，菜单栏，Dock 栏，托盘等。

两种渲染模式
GPU加速
软件输出设备（模式使用软件输出设备在CPU中渲染，因此帧生成速度更快，因此此模式优先于GPU加速模式。
要启用此模式，必须通过调用 app.disableHardwareAcceleration() API 来禁用GPU加速。）

electron开发
electron .运行 使用electron-package进行打包分布安装之后使用electron-package +打包项目路径+名称 --win（Windows系统）–out+（输出路径）

const {app,BrowserWindow} = require(‘electron’)
fuction createWindow(){
let win = new BrowserWindow({
width:100,height:100,
webPreference:{nodeIntegeration:true} //启用node相关的东西
enableRemoteModule:true //配置下面的remote模块可以使用
})
require(‘引入某个文件（菜单文件）’)
win.loadFile(‘index.html’) //也可以防止某个链接
mainWindow.webContents.openDevTools() //打开界面的时候打开调试者工具
}
app.whenReady().then(createWindow)

打包完之后可以直接发给别人用，就完成了

remote模块
const BrowserWindow = require(‘electron’).remote.BrowserWindow
let newWin = new Browser({}) //可以在主进程下创建一个新的窗口，同时也可以使用主进程中的方法
渲染进程（index.html里的基本上都是）也不是主进程，用到remote的都要remote.去引用有的没得方法
只要是在第一个界面就是主进程不需要remote创建页面，不是在第一个界面需要remote创建

引入菜单
const {Menu} = require(‘electron’)
let template = [
{label:‘11’,submenu:[{label:’’，click:()=>{}},{label:’’,click:()=>{}}]}, //添加子菜单并添加事件
{label:’’,submenu:[{label:’’,accelerator:‘ctrl+n’}]} //accelerator设置快捷键
]
//编辑菜单
引入菜单
let m = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(m)

右键菜单（右键的话是渲染进程要用到remote模块）
let m = remote.Menu.buildFromTemplate(…)
window.addEventListener(‘contextmenu’,function(){ //context就是右键你敢信
e.preventDeafult()
m.popup({window:remote.getCurrentWindow()}) //右键菜单
})

通过连接打开浏览器
不是点击a标签在这个窗口打开，而是在浏览器
const {shell} = require(‘electron’)
前面js的都不写了
shell.openExternal(href) 就OK

嵌入网页和打开子窗口
在主进程中
let BrowserView = electron.BroswerView //引入BroswerViews
let view = new BroswerView()
mainWindow.setBrosweView(view)
view.setBounds({x:0,y:0,width:1000,height:1000}) //为嵌入网页设置坐标及大小
view.webContents.loadURL(’’) //嵌入网页渲染url
点击事件的时候window.open() //即可打开子窗口

点击子窗口向父窗口传递信息
window.opener.postMessage(data,targetOrigin:传递给哪个父窗口（默认都传）)
父窗口获取发出的信息
window.addEventListener(‘message’，（msg）=>{})

文件对话框(打开的是类似于上传文件的那个窗口)
dialog.showOpenDialog({ 打开一个对话框
title:’’//标题，
defaultPath:’’//默认打开路径，
filters:[{name:‘img’,extensions:[‘jpg’]}] //过滤器只找extension的，
buttonLabel:’’//打开按键，

}) .then(result=>{
let image = document.getElementById(‘images’)
images.setAttribute(‘src’,result.filePath[0])
})
设置某个有src的元素src时要这样

保存文件对话框使用
dialog.showSaveDialog({
和前面参数一样的
}).then(()=>{
fs.writeFileSync(result.filePath,‘要保存的内容’) //使用node里的fs操作写入文件，sync同步
}).catch(err=>{})

消息对话框操作，只讲基础属性
dialog.showMessageBox({
type:‘warning’,
title:’’,
message:’’,
buttons:[‘一个按钮’，‘两个按钮’] ，–返回数组下标形式
}).then(result=>{
})
就是经常看到的消息对话框

断网提醒功能（监听online和offline事件）
window.addEventListener(‘online’,function(){})
window.addEventListener(‘offline’,function(){alert()})

底部消息通知
let option = {
title:’’,
body:‘来了来了’
}
new window.Notification(option.title,option)

注册全局快捷键（像crtl+f一样）
let globalShortcut = electron.globalShortcut
//他必须写在on ready进程里面
globalShortcut.register(‘ctrl+e’,()=>{})

剪切板功能

const {clipboard} = require(‘electron’) //复制文字，图片什么的都可以
clipboard.writeText(code.innerHTML) //实现复制文字

ipcMain
从主进程到呈现程序进程异步通信
ipcmain.on(’’,(event,arg)=>{event.sender.send(’’)})

vue-electron脚手架
安装vue init simulatedgreg/electron-vue

通过electron-builder和electron-updater进行热更新
或者安装electron-reloader，在主进程js中require进来

webpack并不会对window对象进行编译
getCurrentWindow().minimize() 页面最小化.maximize（）页面最大化