ELECTRON框架-入门使用

雨点打透心脏的1/2处 2022-10-20 00:48 209阅读 0赞

# 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 将多个路径段联结在一起，创建一个跨平台的组合路径字符串。