Electron桌面應用構建指南

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": "[email protected]",
        "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