• 结合React+TypeScript进行Electron开发
  • 1. electron基本简介
    • 为什么选择electron？
  • 2. 快速上手
    • 2.1 安装React(template为ts)
    • 2.2 快速配置React
    • 2.3 安装electron
    • 2.4 配置main.js、preload.js和package.json文件
    • 2.5 运行electron项目
    • 2.6 打包项目
  • 3. 自动刷新页面
  • 4. 主进程和渲染进程
  • 5.定义原生菜单、顶部菜单
    • 5.1 自定义菜单
    • 5.2 给菜单定义点击事件
    • 5.3 抽离菜单定义
    • 5.4 自定义顶部菜单
    • 5.5 在渲染进程中使用主进程方法remote和electron（点击创建新窗口）
    • 5.6 点击打开浏览器
  • 6. 打开对话框读取文件
    • 6.1 读取文件
    • 6.2 保存文件
  • 7. 定义快捷键
    • 7.1 主线程定义
    • 7.2在渲染进程中定义
  • 8. 主进程和渲染进程通讯

结合React+TypeScript进行Electron开发

1. electron基本简介

electron是使用JavaScript，HTML和CSS构建跨平台的桌面应用程序。我们可以使用一套代码打包成Mac、Windows和Linux的应用，electron比你想象的更简单，如果把你可以建一个网站，你就可以建一个桌面应用程序，我们只需要把精力放在应用的核心上即可。

为什么选择electron？

• Electron 可以让你使用纯JavaScript调用丰富的原生APIs来创造桌面应用。你可以把它看作是专注于桌面应用。
• 在PC端桌面应用开发中，nwjs和electron都是可选的方案，它们都是基于Chromium和Node的结合体，而electron相对而言是更好的选择方案，它的社区相对比较活跃，bug比较少，文档相对利索简洁。
• electron相对来说比nw.js靠谱，有一堆成功的案例：Atom编辑器 Visual Studio Code WordPress等等。
• Node.js的所有内置模块都在Electron中可用。

2. 快速上手

2.1 安装React(template为ts)

yarn create react-app electron-demo-ts --template typescript

2.2 快速配置React

工程架构

index.html

App.tsx

import React from 'react'

export default function App() {
  return (
    
App
  )
}

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  // 
    
  // 
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

2.3 安装electron

将electron包安装到您的应用程序的devDependencies.

// npm
npm install --save-dev electron
// yarn
yarn add --dev electron

2.4 配置main.js、preload.js和package.json文件

main.js

// 导入app、BrowserWindow模块
// app 控制应用程序的事件生命周期。事件调用app.on('eventName', callback)，方法调用app.functionName(arg)
// BrowserWindow 创建和控制浏览器窗口。new BrowserWindow([options]) 事件和方法调用同app
// Electron参考文档 https://www.electronjs.org/docs
const {app, BrowserWindow, nativeImage } = require('electron')
const path = require('path')
// const url = require('url');


function createWindow () {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
        width: 800, // 窗口宽度
        height: 600,  // 窗口高度
        // title: "Electron app", // 窗口标题,如果由loadURL()加载的HTML文件中含有标签