Electron + React + Antd + Next 搭建桌面应用

最近涉及到一个本地应用程序开发。以前经常用的是WPF之类的框架进行开发。现在流行前后端分离，就尝试进行前端nodejs后端使用c# webapi开发。故作此笔记作为记录

Ant Design Pro 是一个企业级中后台前端，好处是开箱即用，有很多封装可以快速成型产品

具体框架效果可以自行查看官方预览效果 http://preview.pro.ant.design
 

//创建项目
yarn create umi
//初始化项目依赖
yarn

选择内容可以根据自己情况进行选择

创建完成后执行

npm start
 
 DONE  Compiled successfully in 62125ms                                                                         15:49:54
 
 
  App running at:
  - Local:   http://localhost:8000 (copied to clipboard)
  - Network: http://192.168.137.1:8000

现在可以打开http://localhost:8000 打开链接就可以显示具体的界面

安装electron

yarn add electron

 安装完成后。在根目录下创建mian.js并根据官网资料添加如下内容         

const { app, BrowserWindow } = require('electron')
 
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
 
  win.loadURL("http://localhost:8000")
}
 
app.whenReady().then(createWindow)
 
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

package.json添加

"scripts": {
    ...//其他内容
    "electron-start": "electron .",
},
"main": "main.js",

启动antd和electron

yarn run start
 
yarn run electron-start

这样开发就已经没有问题了

以上electron和antd的基础内容已经完成。、

打包应用程序

接下来开始进行antd打包静态页面并用electron打开

打包antd

yarn build

打包完成以后可以查看目录中多了dist文件夹,打开index.html文件发现显示内容是这样的.

这是因为antd默认相对路径，这是需要webserver才能正常访问的，在apache随便弄一个虚拟主机。把dist的内容丢进去，正常访问。

那么如果electron下的话，我们显然不能直接让electron直接file形式调用index.html来进行访问，那我们使用nodejs的http-server来创建一个本地http服务挂载页面

yarn add http-server

 修改main.js

const { app, BrowserWindow } = require('electron')
const path = require('path')//添加path
const httpServer = require('http-server')//添加引用
 
function createWindow() {
    //给dist文件夹添加8000端口的http服务
    httpServer.createServer({ root: path.join(__dirname, './dist') }).listen(8000)
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })
 
    //win.loadFile('index.html') 注释掉这里
    win.loadURL('http://localhost:8000')//改成本地8000端口监听
}
 
app.whenReady().then(createWindow)
 
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
 
app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

接下去修改package.json

"scripts": {
    "electron-start": "npm run build && electron .",//修改electron-start
}

这样我们electron就可以创建一个http://localhost:8000的http服务调用antd build出来的静态文件了

安装electron-packager用于文件打包.

yarn add electron-packager

修改package.json

"scripts": {
    "electron-package": "electron-packager . antd_electron --platform=win32 --arch=x64 --out=./out --asar --app-version=0.0.1 --overwrite"
}

运行命令进行编译

yarn run electron-package

编译完成后，文件夹出现out文件夹。进入后运行antd_electron.exe即可打开正常运行的项目.

其他设置

访问外部WebApi

有些项目中需要访问外部的api。根据umi的文档说明。build以后proxy将会失效，需要将实际地址写入到request

修改src/uitls/request.ts

/**
 * 配置request请求时的默认参数
 */
const request = extend({
  errorHandler, // 默认错误处理
  credentials: 'include', // 默认请求是否带上cookie
  prefix:'http://xxxx.com'//这里添加api链接的前缀
});

这样electron内的antd就可以访问外部api了