Electron + React + Bootstrap 开发桌面应用

概述

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。
React: A JavaScript library for building user interfaces.
Bootstrap: 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

结合最快捷的开发方式，从搭建环境开始

创建一个React项目，使用WebStrom IDE
安装electron模块
```
npm install --save electron
```
安装path模块
```
npm install --save path
```
修改package.json配置

a). 添加入口
```
"main":"main.js"
```
b). 添加homepage
```
"homepage":"."
```
c). 添加devMode, 用于判别开发模式，方便main.js代码编写
```
"devMode": true/false
```

添加运行主文件main.js,并修改相关代码

const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');
const pkg = require('./package.json');
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

function createWindow() {
    // Create the browser window.
    win = new BrowserWindow({
        width: 800,
        height: 600,
        autoHideMenuBar: true,
        maximizable: false,
    }); // and load the index.html of the app.
    if (pkg.devMode)
        win.loadURL('http://localhost:3000/');
    else
        win.loadURL(url.format({
            pathname: path.join(__dirname, './build/index.html'),
            protocol: 'file:',
            slashes: true
        }));
    // Open the DevTools.
    // win.webContents.openDevTools(); // Emitted when the window is closed.
    win.on('closed', () => {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        win = null;
    });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit();
    }
});
app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
        createWindow();
    }
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

*: 代码中有一处代码针对开发环境及发布环境做了相应的判断，如下：

    if (pkg.devMode)
        win.loadURL('http://localhost:3000/');
    else
        win.loadURL(url.format({
            pathname: path.join(__dirname, './build/index.html'),
            protocol: 'file:',
            slashes: true
        }));

添加运行的脚本, 运行electron项目

//package.json 修改
{
  "name": "media",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",
  "homepage": ".",
  "devMode": true,
  "dependencies": {
    "electron": "^2.0.2",
    "path": "^0.12.7",
    "react": "^16.4.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.0",
    "react-scripts": "^1.1.4"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron-serv": "npm start", //添加的运行脚本命令
    "electron-start": "electron ." //添加的运行脚本命令
  }
}

添加bootstrap模块
```
npm install --save react-bootstrap
```

添加bootstrap代码，运行并测试

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import {Button, ButtonToolbar,} from 'react-bootstrap';

class App extends Component {

    _showAlert() {
        alert('Hello');
    }

    render() {
        return (
            
                
                    
                    Welcome to React
                
                
                    {/* Standard button */}
                    

                    {/* Provides extra visual weight and identifies the primary action in a set of buttons */}
                    

                    {/* Indicates a successful or positive action */}
                    

                    {/* Contextual button for informational alert messages */}
                    

                    {/* Indicates caution should be taken with this action */}
                    

                    {/* Indicates a dangerous or potentially negative action */}
                    

                    {/* Deemphasize a button by making it look like a link while maintaining button behavior */}
                    
                
                What !!!
                
                
                    To get started, edit src/App.js and save to reload.
                
            
        );
    }
}

export default App;

*: 注意，有可能上面代码在运行后并不能正确加载出bootstrap的样式，我们需要修改public文件夹中index.html的文件内容，添加bootstrap的css-link支持，如下：

最后

运行出来带有热更新属性的，代码改动后程序会自动更新。前提是您可能需要同时运行:

npm start && electron .

效果如下：

Electron + React + Bootstrap 开发桌面应用_第1张图片

深度截图_选择区域_20180529154038.png

Electron + React + Bootstrap 开发桌面应用

Welcome to React

你可能感兴趣的:(Electron + React + Bootstrap 开发桌面应用)