Electron桌面应用构建指南

技术栈

1. react
2. react-router-dom
3. electron
4. ant design

搭建过程

添加镜像源

根目录添加 .yarnrc文件

registry "https://registry.npm.taobao.org"  
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"  
phantomjs_cdnurl "http://cnpmjs.org/downloads"  
electron_mirror "https://npm.taobao.org/mirrors/electron/"  
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"  
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"  
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"  

初始化react

1. 用create-react-app 初始化一个react应用

create-react-app pound-system

2.安装依赖并启动项目

<!--安装依赖-->
yarn install

<!--启动项目-->
yarn start

接入electron

1. 安装electron依赖

yarn add electron --dev

2.在./public 文件夹下 创建electron.js

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

// window对象的全局引用
let mainWindow
function createWindow() {

  mainWindow = new BrowserWindow({ width: 800, height: 600 })

  // 开发环境
  // mainWindow.loadURL('http://localhost:3000/');

  // 生产环境 
  mainWindow.loadFile(`${__dirname}/index.html`);


  // 打开开发者工具，默认不打开
  // mainWindow.webContents.openDevTools()

  // 关闭window时触发下列事件.
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow);

// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {

  if (mainWindow === null) {
    createWindow()
  }
})

3.配置package.json 添加 如下属性

{
    "main": "public/electron.js",
    "homepage": "./",
    "scripts":{
        "electron-dev": "electron ."
    }
}

4.启动桌面程序

yarn electron-dev

接入react-router-dom

1. 安装依赖

yarn add react-router-dom

2.修改App.js文件

import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import './App.css';

import Home from './pages/home';
import About from './pages/about';

// 入口app
const App = () => {
  return (
    <Router>
      <header className="header">
        <NavLink to="/">首页</NavLink>
        <NavLink to="/about">关于我们</NavLink>
      </header>
      <div className="App">
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
};

export default App;

3.在pages文件夹下 创建几个测试页面 home.js 、 about.js

// home.js
import React from 'react';

export default () => {
  return <div>Home</div>;
};

// about.js
import React, { useEffect } from 'react';

export default () => {
  useEffect(() => {}, []);
  return <div>about</div>;
};

4.测试页面点击即可切换路由

接入sass模块化

create-react-app本身支持sass模块化 我们只需按照规范编写就可以了

1. 安装依赖

yarn add sass-loader node-sass

2.修改home.js页面 添加引用路径并添加className

import React from 'react';
import styles from './index.module.scss';
export default () => {
  return <div className={styles.main}>Home</div>;
};

3.创建对应的index.module.scss

.main{
  color:blue;
}

4.预览效果 即可看到home也得字体变成蓝色了

接入ant design

1. 安装依赖

yarn add antd

2.直接在home页引入 antd组件

import React from 'react';
import styles from './index.module.scss';
import { Button, message } from 'antd';

export default () => {
  return (
    <div className={styles.main}>
      Home
      <Button onClick={() => message.warn('您点击了我们的提示信息')}>点击提示</Button>
    </div>
  );
};

3.在全局css index.css 引入样式

@import '~antd/dist/antd.css';

4.预览home页即可成功应用

项目打包

这里采用electron-builder进行打包

1. 安装依赖

yarn add electron-builder --dev

2.配置打包参数

在package.json中添加 or 修改如下属性

{
    "scripts":{
        "dist-win32": "electron-builder --win --ia32",
        "dist-win64": "electron-builder --win --x64",
        "dist-mac": "electron-builder --mac"
    },
    "main":"build/electron.js",
    "description": "项目描述",
    "author": {
        "name": "katte",
        "email": "417560450@qq.com",
        "url": "https://github.com/katteXu"
     },
     "build": {
        "productName": "my-project",
        "appId": "org.my-project.electron-react-antd",
        "directories": {
          "output": "dist"
        },
        "files": [
          "build/**/*"
        ],
    }
}

详细配置参数可参考 electron-builder

3.打包react代码

先构建react代码到build文件夹

yarn build

4.打包electron安装包

<!--mac环境-->
yarn dist-mac

<!--windows环境-->
yarn dist-win64

5.验证

mac环境 --> dmg安装包 windows环境 --> exe安装包

分别安装验证即可

问题及解决方案

1.yarn 安装electron会有问题

根目录下添加.yarnrc文件配置镜像即可解决

2.本来想应用less模块化样式 不过默认create-react-app 不支持 需要自行修改一些配置

修改配置可百度查询 create-react-app less关键字

3.安装node-sass可能会有报错

根目录下添加.yarnrc文件配置镜像即可解决

4.create-react-app 中文文档

https://www.html.cn/create-react-app/docs/getting-started/

5.electron-builder打包下载慢可参考知乎大神的文章

https://zhuanlan.zhihu.com/p/110448415

6.打包mac安装包代码签名问题

https://segmentfault.com/a/1190000012902525

本文由哈喽比特于4年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/XrdCARiUyR9T1REHYdKRQA