前端基于react、Electron构建桌面应用程序教程教程送上

发布时间：2023-01-13 14:17:43 所属栏目：应用来源：

导读：　　前言

　　提起桌面应用程序，很多人都会自然而然地想到，C++、.NET 等。这是无可厚非的，毕竟这些是开发桌面应用的常用开发语言。但是现在出现了一个框架，这对于前端开发人员来说是一个福音，因为有了这个框

　　前言

　　提起桌面应用程序，很多人都会自然而然地想到，C++、.NET 等。这是无可厚非的，毕竟这些是开发桌面应用的常用开发语言。但是现在出现了一个框架，这对于前端开发人员来说是一个福音，因为有了这个框架前端开发人员也可以得心应手的搭建桌面应用程序，而且相比于传统的开发方式，用前端框架来构建的优势在于它不用基于复杂的开发环境，只需要一个nodejs环境。这对于开发人员是一个好消息，这样可以更加容易的实现开发环境。

　　在Electron的官网中，有这样一句话“使用JavaScript，HTML和 CSS构建跨平台的桌面应用程序”。Electron是基于Chromium和Node.js，让开发人员可以使用HTML、CSS和JavaScript方便的构建桌面应用。重点是跨平台，Electron兼容Mac、Windows和Linux！

　　本文给大家介绍如何从零开始在react项目中使用electron构建一个桌面应用程序。

　　开发环境

　　NodeJs

　　React

　　Electron

　　构建桌面应用程序教程

　　如何安装node.js在这里我就不多赘述了，大家可以去官网：下载对应平台的版本的安装包。如有问题可以在评论区提问。

　　1.安装react项目

　　React项目安装我推荐使用create-react-app脚手架安装，它可以方便的构建react项目。

　　首先，安装create-react-app。可以使用命令：npminstall -g create-react-app 进行全局安装create-react-app。

　　安装create-react-app成功以后就可以创建react项目了。使用create-react-app脚手架直接创建：create-react-appmy-app。

　　安装react项目成功后，进入项目根目录：cdmy-app。然后在项目中启动前端页面：npmstart。

　　启动成功以后在浏览器中打开：:3000/。即可看到前端页面了。

　　到这里我们的react项目构建完成了，并且能够正常启动，这步很重要。如果前端页面启动不起来，那接下来的步骤也没有意义了。

　　2安装Electron构建桌面应用

　　首先我们在my-app的项目根目录中新建文件夹electron，用于放electron的壳框架。

　　在electron目录中初始化项目，运行：npminit。填写相关信息后完成初始化。

　　packagename: 你的项目名字叫啥

　　version:版本号

　　description:对项目的描述

　　entrypoint: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）

　　testcommand: 项目启动的时候要用什么命令来执行脚本文件（默认为nodeapp.js）

　　gitrepository: 如果你要将项目上传到git中的话制作应用程序，那么就需要填写git的仓库地址（这里就不写地址了）

　　keywirds：项目关键字（我也不知道有啥用，所以我就不写了）

　　author:作者的名字（也就是你叫啥名字）

　　license:发行项目需要的证书（这里也就自己玩玩，就不写了）

　　初始化成功以后就可以安装Electron框架了，在electron目录中运行Electron安装命令:npminstall electron –save-dev。

　　安装成功后开始编写electron的入口maon.js。在electron文件夹中新建src文件夹，然后再src文件夹中创建main.js入口文件。Main的代码如下：

　　const {app, BrowserWindow, ipcMain} = require('electron');

　　let mainWindow = null;

　　function createWindow() {

　　const windowOptions = {

　　//frame:false,

　　width: 1200,

　　height: 800,

　　minWidth:900,

　　minHeight:600,

　　webPreferences: {

　　webSecurity: false,

　　nodeIntegration: true, // 是否集成 Nodejs

　　}

　　};

　　//创建electron窗口

　　mainWindow = new BrowserWindow(windowOptions);

　　//打开electron窗口后加载页面，次页面为react项目的首页，如果是静态页面，请修改中相应页面路径

　　mainWindow.loadURL("http://127.0.0.1:3000/")//根据自己的端口和ip修改

　　//打开开发者模式，开发环境请打开方便调试，生产环境需要禁用。

　　mainWindow.webContents.openDevTools();

　　//判断是否是开发模式

　　}

　　//app主进程的事件和方法

　　app.on('ready', () => {

　　createWindow();

　　});

　　app.on('window-all-closed', () => {

　　if (process.platform !== 'darwin') {

　　app.quit()

　　}

　　});

　　app.on('activate', () => {

　　if (mainWindow === null) {

　　createWindow();

　　}else{

　　mainWindow.show();

　　}

　　});

　　module.exports = mainWindow;

　　入口文件创建完成以后我们需要配置引用main.js。在electron/package.js中配置main:”src/main.js”。

　　到此步骤，一个简单的基于react桌面应用程序已经构建好了，最后一步就是启动electron项目就可以运行我们创建的桌面应用了。在electron中执行命令：npmrun start 然后就会打开我们的桌面应用。

（编辑：百客网 - 域百科网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!