首页 > 其他分享 >Electron小白入门自学笔记(一)

Electron小白入门自学笔记(一)

时间:2023-01-02 21:48:19浏览次数:87  
标签:入门 渲染 win electron js Electron 模块 进程 自学

码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14297176.html

 

目录

 

一、从Hello Electron开始

  1. 创建一个空的文件夹,并创建入口 main.js 文件,index.html内容文件,

  2. 安装electron

    • npm init -y:初始化配置文件 package.json

    • npm i electron

  3. main.js 文件

    • 引入模块,创建应用

    • 创建窗口

    • 加载内容

    • 打开调试工具(可选)

    • 关闭窗口及应用监听

  4. 执行文件

    • 直接执行:electron main.js

    • 默认执行:electron .

    • package.json 添加执行脚本: "start": "electorn main.js", 执行:npm run start

    • 执行上述命令报错解决:先可尝试全局安装,在执行命令,如若仍然报错,可能需要配置脚本执行权限

    windows下运行*.ps1脚本(powershell的脚本)的时候,需要设置执行权限,PowerShell默认的执行策略就是Restricted,禁止任何脚本的执行。

    • 首先管理员身份运行 windows powershell ,输入Get-ExecutionPolicy ,用于获得当前的执行策略。

    • Set-ExecutionPolicy 命令设置/更改执行策略,选择RemoteSigned这个执行策略,这个策略既安全又可以执行本地编写的脚本

// main.js  引入模块
// app模块:控制应用的生命周期
// BrowserWindow模块: 创建浏览器窗口
const { app ,BrowserWindow} = require('electron');

//  path模块: node 的内置模块,用于拼接路径
const path = require('path');

// 1.初始化应用之后,会触发监听ready 事件
app.on('ready',ny_createWindow)

let win;
// 创建窗口
function ny_createWindow(){
  // 1.1创建窗口
  win = new BrowserWindow({
    width:330,
    height:355,
    resizable:false, // 是否可改变宽高,默认true
    movable:false,   // 是否可拖拽,默认true
    webPreferences: {
      nodeIntegration: true, // 是否集成 Nodejs
      enableRemoteModule: true, // 是否允许渲染进程 调用主进程模块
    }
    // 1.为了在渲染进程中使用require(),还需要启用 nodeIntegration 。
    // 2.从v9版本开始,remote除非将 enableRemoteModule 设置为true,否则不允许在渲染进程中使用。
  });

  // 1.2 加载内容
  // win.loadURL('http://www.baidu.com')   // 远程

  // __dirname: 当前js文件所在的文件夹路径,绝对路径
  win.loadURL(path.join(__dirname, './index.html')) // 本地 相对路径

  // mac 系统:需要拼接 file 协议
  // path.join('file://',__dirname,'./index.html')

  // 1.3 调试工具
  win.webContents.openDevTools(); // webContents: 控制和渲染页面的

  // 1.4 关闭窗口, 关闭窗口前想做的事
  win.on('close',function(){
    win = null;  // 关闭窗口
    app.quit();  // 关闭应用
  })

二、制作设置菜单 Menu

  1. 创建menu.js ,引入模板,创建菜单模板

  2. 构建菜单(实例化一个菜单对象)

  3. 设置菜单对象到应用中

  4. 用到的方法:buildFromTemplate setApplicationMenu

  5. 选项:

    • type:('normal' | 'separator' | 'submenu' | 'checkbox' | 'radio')
    • label:标题
    • accelerator:快捷键,区分 mac 及 win
    • submenu:子菜单
    • click:点击事件
  6. main.js中引用: require('./menu');

// menu.js  引入模板
const { Menu } = require('electron')

// 1.设置一个模板
let template = [
  {
    label:'文件',
    submenu:[
      {
        label:'新建文件',
        accelerator:'ctrl+N',
        click:function(){
          console.log('new file')
        }
      },
      {
        type:'separator'
      },
      {
        label:'新建窗口',
        accelerator:(function(){
          if(process.platform =='darwin'){  //mac 基于darwin
            return 'alt+command+M'
          }else{ //win
            return 'alt+ctrl+M'
          }
        })(),
        click:function(){
          console.log('new window')
        }
      },
      {
        type:'separator'
      },
      {
        label:'自动保存',
        accelerator:'ctrl+S',
        type:'checkbox',
        checked:true,
        click:function(){
          console.log('saved')
        }
      },
    ]
  },
  {
    label:'编辑'
  },
]

// 2. 构建菜单(实例化一个菜单对象) 
const menu = Menu.buildFromTemplate(template);

//3. 设置菜单对象到应用中
Menu.setApplicationMenu(menu);

三、主进程(Main Process)和渲染进程(Render Process)

electron核心可以分成2个部分,主进程渲染进程。主进程连接着操作系统和渲染进程,可以看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了。只是载体改变了,从浏览器变成了window。传统的web环境我们是不能对用户的系统进行操作的。而electron相当于node环境,可以在项目里使用所有的node api 。

简单理解:
给web项目套上一个node环境的壳。

主进程

在Electron中,入口是一个js文件,运行这个入口文件的进程称作主进程。

(通常会是package.json里的main脚本,一般是main.js)

在主进程使用BrowserWindow模块可以创建并管理web页面,也就是应用的GUI(图形界面)

const { BrowserWindow } = require('electron');
const path = require('path');

// 主进程创建web页面
let win = new BrowserWindow({...});

// 加载本地文件
// win.loadURL(path.join('file://',__dirname, './index.html'))  // mac
win.loadURL(path.join(__dirname, './index.html'))
  

渲染进程

在主进程创建的每一个web页面也都运行着自己的进程,页面引入的js文件就属于渲染进程。

渲染进程各自管理自己的页面,可以想象是浏览器的一个个的tab。

四、在渲染进程中创建一个子窗口

  1. 创建渲染进程对应render.js文件

  2. 渲染进程引入BrowserWindow模块,需要借助于remote模块,

    • 渲染进程不能直接使用 BrowserWindow ,因为该模块默认是主进程允许使用的
    • 借助 remote ,从中引入主进程中的模块,需要在主进程窗口中配置 enableRemoteModule,允许渲染进程 调用主进程模块
  3. 并在index.html中引入render.js,两种引入方法及区别

   <!-- 1.引入render.js -->
   <script src="./render-process/render.js"></script>
    
   <!-- 2.electron 基于node -->
   <script>
       require('./render-process/render.js');
   </script>
     
   <--   
    区别:
    	src: 是全局变量
    	require: 引入的文件的最外层的变量,不是全局变量,注:为了在渲染进程中使用require(),还需在主进程窗口配置中启用 nodeIntegration 。
    	//main.js
        win = new BrowserWindow({
           width:330,
           height:355,
           resizable:false, // 是否可改变宽高,默认true
           movable:false,   // 是否可拖拽,默认true
           webPreferences: {
                 nodeIntegration: true, // 是否集成 Nodejs
                 enableRemoteModule: true, // 是否允许渲染进程 调用主进程模块
             }
        })    
     使用:
        1.元素绑定onclick事件 ==== src引入
        2.require  ==== 给元素绑定一个ID ,在render.js获取元素并绑定事件
   -->

五、进程间通信

在electron下,主进程与渲染进程相互通信要通过ipc(Inter-Process Communication),进程间通讯模块来完成,

主进程与渲染进程调用的ipc模块是不一样的:

  • 主进程调用ipcMain

  • 渲染进程调用ipcRenderer

A. 渲染进程 给 主进程 发送指令

  1. ipcRenderer模块:渲染进程引入,用于发送事件给主进程,和监听主进程返回的回复事件

    • const { ipcRenderer } = require('electron');

    • 发送事件:ipcRenderer.send('事件名称',传递的数据);

    • 监听事件:ipcRenderer.on('监听事件名称',接收的数据);

  2. ipcMain模块:主进程引入,用于接收渲染进程发送的事件并进行回复

    • const { ipcMain } = require('electron');

    • 监听事件:ipcMain.on('监听事件名称',接收的数据);

index.html:

<h1>Hello Electron!</h1>
<button onclick="ny_click()">click me</button>

<!-- 引入render.js 渲染进程-->
<script src="./render-process/render.js"></script>

render.js:

function ny_click(){
  console.log('Render:','Echoyya')
  ipcRenderer.send('myName','Echoyya');
}

main.js:

ipcMain.on('myName',function(event,msg){
  console.log('Main:',msg);
})

运行结果:主进程输出结果会打印在终端,而渲染进程输出结果会打印在调试工具中

B. 主进程 给 渲染进程 发送指令

了解了 渲染进程 -> 主进程 后,反之就很好理解和掌握了,大同小异,简单总结一下:

  1. main.js 发送指令 两种方式:
   ipcMain.on('myName',function(event,msg){
     // 1. 通过event 
     //event.sender.send('msg-b','程序媛');
     
     // 2. 通过webContents (推荐)
     win.webContents.send('msg-b','程序媛'); 
   })
  1. render.js 渲染进程接收指定
   ipcRenderer.on('msg-b',function (event, msg) {
   	console.log('Render:',msg)
   });

运行结果

C. 渲染进程 给 渲染进程 发送指令

思路:渲染进程 -> 主进程 -> 渲染进程

a.js: ipcRenderer.send('dataToMain','渲染进程 -> 主进程 -> 渲染进程')

main.js:

ipcMain.on('dataToMain',function(event,data){
	win.webContents.send('dataToRender',data);
})

b.js:

 ipcRenderer.on('dataToRender', function (event, data) {
	console.log(data)
 })

D. 不同渲染进程之间数据共享

  1. 可以很简单的使用H5的api来完成,如localStorage,sessionStorage,但今天要说的是另一种

  2. 在主进程中将一个对象储存为全局变量,然后通过remote模块操作

    • 创建a.js , b.js,并在index.html中引入

index.html:

<button id="btn1">改变数据</button>
<button id="btn2">获取数据</button>
	
<script>
	require('./render-process/a.js');
	require('./render-process/b.js');
</script>

main.js:

// 全局变量
global.shareObject = {
  name:'上海'
}

a.js:

const remote = require('electron').remote;

let btn1 = document.getElementById('btn1');

btn1.onclick = function(){
  
  remote.getGlobal('shareObject').name = '北京';
  
  console.log('has changed');

}

b.js:

const remote = require('electron').remote;

let btn2 = document.getElementById('btn2');

btn2.onclick = function(){

  let msg = remote.getGlobal('shareObject').name

  console.log(msg)

}

六、提示框 dialog 模块

  1. 首先dialog模块是主进程可使用模块

  2. 调用语法:dialog.showMessageBox({ ... }),版本升级后不支持原来的回调方法,改为返回promise对象

  3. 常用配置对象参数:

    • type:类型(error/info)
    • title:标题
    • message:提示信息
    • icon:本地图标(需使用nativeImage模块,且主进程与渲染进程均可用该模块)
    • buttons:按钮(数组类型)
const { dialog ,nativeImage} = require('electron');
const path = require('path');
 
// 1.信息对话框
dialog.showMessageBox({
  title:'温馨提示',
  message:'XXXXX XXXXX XXXXX XXXXX XXXXX',
  buttons:['Yes','No'],
  icon:nativeImage.createFromPath(path.join(__dirname,'../src/img/icon1.png'))
}).then(function(index){
  if(index.response == 0){ // 点击了Yes按钮
    console.log('I want you !');
  }else{ // 点击了No按钮
    console.log('no no no');
  }
});

// 2.错误提示框
dialog.showErrorBox('1213','访问错误')

七、打包(electron-packager)

安装打包工具:npm i electron-packager

打包必要元素及格式输入:electron-packager <应用目录> <应用名称> <打包平台> --out=<输出目录> <架构> <应用版本> <忽略文件> <图标> --overwrite

执行上述命令,可在输出目录中,打包成功一个exe 可执行文件,此命令区分mac及win,设备原因,此处仅演示win系统打包,mac系统的同学,需自行查找相关资料!!!

package.json:

"scripts": {
	"start": "electorn main.js", 
	"pack":"electron-packager ./  test --platform=win32 --out=./dist --arch=x64 --app-version=1.0.0 --ignore=node_modules --icon=./src/img/hrbb.ico --overwrite "
},

标签:入门,渲染,win,electron,js,Electron,模块,进程,自学
From: https://www.cnblogs.com/sexintercourse/p/17020580.html

相关文章