ELECTRON框架-入门使用

Electron

含义： 一个构建桌面应用的框架。

创建electron项目

• 创建项目文件，进入文件，打开命令窗口， 输入

npm init //初始化项目，创建 package.json文件

** 注意内容**
package.json 
	需要将入口文件改成main.js,author 和 descriptioon可以随意
需要在目录下面创建main.js文件，空文件即可

// 安装electron
npm install --save-dev electronc  // 如果安装不上，可试着切换使用 cnpm进行安装
** 注意内容**
package.json
script:{
	"start":"electron ."
	}
	
// 运行项目 
npm start 

创建页面

在根目录下面创建html文件
在界面中随意写点内容，以便观察

• main.js 文件中引入 electron模块，并创建窗口

const { app , BrowserWindow } = require("electron")

function createWindow(){
	const win = new Browserwindow({
		width:800,
		height:600
	})
	win.loadFile("index.html") //对应上面创建的HTML文件，即 页面的入口文件
}

app.whenReady().then(()=>{
	createWindow()
})

• 注意： electron ，只有在app模块的ready事件被激发后才能创建浏览器窗口
• 可以通过 app.whenReady() api来监听此事件，
• 在whenReady()成功之后调用 createWindow()

** 写完这里记得重启一下项目 ， 不然项目无法看到窗口的**

关闭所有窗口时退出应用

• 可监听 app模块中的 window-all-closed 事件

app.on("window-all-closed",function(){
	if(process.platform !== 'darwin') app.quit()
})

如果没窗口打开则打开一个窗口（mac)

• mac 通常在即使没有打开任何窗口的情况下继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口
• 监听app模块的activate事件，并在没有浏览器窗口打开的情况下调用你仅存的 createWindow()

app.whenReady().then(()=>{
	createWindow()
	app.on('activate',function(){
		if(BrowserWindow.getAllWindows().length === 0 ) createWindow()
	})
})

通过 预加载 脚本从渲染器访问 node.js

• 在主进程通过node的全局process对象访问这个信息是微不足道的，然而，你不能直接在主进程中编辑dom，因为它无法访问渲染器文档上下文。他们存在于完全不同的进程
• 将预加载脚本连接到渲染器上
• 预加载脚本在渲染器进程加载之前加载
• 访问 渲染器全局（window || document ） 和 node.js环境

创建preload.js文件

window addEventListener("DOMContentLoaded",()=>{
	const replaceText = （selector,text) =>{
		const element = document.getElementById(selector)
		if(element) element.innerText = text
	}
	for(const dependency of ['chrome','node','electron']){
		replacecText(`${dependency}-version`,process.version[dependency])
	}
})

将 proload.js文件插入 HTML中
main.js

	function createWindow(){
		const win = new BrowserWindow({
			 webPreferences: {
              preload: path.join(__dirname, 'preload.js')
             }
		})
	}

• __dirname 字符串指向当前正在执行脚本的路径 (本例中，你的项目的根文件夹)。
• path.join API 将多个路径段联结在一起，创建一个跨平台的组合路径字符串。