2021-11-04

2023-11-24 10:42:40

electron基本使用

简介：

1.基于chromium和nodeJs 开发
2.使用JavaScript、html、css 构建跨平台应用程序
3.是开源的
4.兼容mac / windows / linux
5.比nwjs 靠谱

1.使用方法

(1)初始化文件夹 npm init

(2)先装入模块 npm i electron -S (加载electron)

2.修改入口文件

(1)Package.json的 Main 入口中导入 main.js 文件
(2)新增命令： “electron”:”electron .”
(3)运行npm run electron 启动程序

3.使用热加载

npm -save-dev electron-reloader (自动刷新页面)

//  热加载
const reloader = require('electron-reloader')
reloader(module)

4.主进程和渲染进程：

Main 入口文件（只有1个），渲染的页面可以有多个（窗口可以有多个）
(1)查看主进程npm run electron
(2)查看渲染进程（控制台）： ctrl + shift + i,

// 打开控制台的代码： 
mainWindow.webContents.openDevTools()
mainWindow.webContents.openDevTools()

5.自定义原生菜单：

(1)定义一个模板（template）
// 定义菜单模板

const template = [
    {
      label:'文件',
      submenu:[
        {
          label:'新建窗口',
          click: ()=>{
            new BrowserWindow({
              width: 200,
              height: 200
            })
          }
        }
      ]
    },
    {
      label:'关于我们'
    },
    {
      label:'菜单标题',
      submenu:[
        {
          label:'新建窗口'
        }
      ]
    },
  ]

(2)编译模板成菜单（menu）
// 编译模板

  const menu = Menu.buildFromTemplate(template)

(3)设置菜单
// 设置菜单

  Menu.setApplicationMenu(menu)

6.自定义顶部菜单

需要将窗口的frame属性设置为false frame:false
/* 可拖拽 */

    -webkit-app-region: drag;    // 不拖拽 no-drag

(1)点击页面打开浏览器（shell）

shell.openExternal(item.href)

href 是a 标签的属性

7.打开对话框读取和保存文件（dialog）

(1)读取文件
①拿一个标签来显示传过来的文件的值
②打开文件显示需要使用fs 模块

const fs = require('fs')
const textareaEl = document.querySelector('textarea')
//  点击打开文件
const openFile = function (){
    
    const res = dialog.showOpenDialogSync({
        title:'读取文件',
        buttonLabel:'按钮的文字（读取）',
        filters:[
            {
                name:'Custom File Type',extensions:['js'],
            }
        ]
    })
    console.log('res---',res[0])
    const filesContent = fs.readFileSync(res[0]).toString()
    console.log('-filesContent------',filesContent)
    textareaEl.value = filesContent
}

(2)保存文件

//  点击保存文件
const saveFile = function (){
    
    const res = dialog.showSaveDialogSync({
        title:'保存文件',
        buttonLabel:'按钮的文字（保存）',
        filters:[
            {
                name:'保存的文件类型',extensions:['js'],
            }
        ]
    })
    console.log('res---',res)
    fs.writeFileSync(res,textareaEl.value)
}

8.渲染进程和主进程通信

(1)渲染进程使用ipcRenderer 发送信息


// 全局控制窗口大小
let windowSize = 'unmax-window'
// 点击窗口变成最大化
const maxWindow = function (){
    windowSize = windowSize === 'unmax-window' ? 'max-window' : 'unmax-window'
    // 渲染进程和主进程的通讯
    ipcRenderer.send('max-window',windowSize)
}

(2)主进程使用ipcMain接收信息

// 通讯触发
    ipcMain.on('max-window',(event,arg)=>{
      if(arg === 'max-window'){
        mainWindow.maximize()
      }else{
        mainWindow.unmaximize()
      }
    })

9.打包electron

(1)加载

npm i electron-packager -D

(2)添加命令

"build": "electron-packager ./ HelloWorld --platform=win32 --arch=x64 --out ./outApp --overwrite --icon=./favicon.ico"

(3)打包可能会遇到的问题
①需要将devDependencies 里的模块复制到 dependencies 中，因为打包是打包的dependencies

跟着路线走基本都能做出来，遇到的问题也说了
以上是在bilibili 看视屏的总结,如有侵权联系我，即刻删

码农公寓