electron+antd详细教程
第一步:
要做一个electron项目,理论上我们应该从electron-quick-start开始,就是说我们需要如下3个文件:
- package.json,node工程最基本的要求,类似于Java的pom.xml
- main.js 创建窗口,工作在electron的主进程
- index.html 页面,工作在electron的渲染进程
但由于我们要使用antd, antd基于react,它是一个react工程,所以我们从最简单的react工程
create-react-app开始,为什么不用antd的脚手架?官方说这个脚手架只是做demo用,我用antd-init试了一下,发现package.json里东西太多了,而且生成的代码有点莫名其妙,比如index.html里引入了common.js,项目里根本就没有common.js啊,这个脚手架的文档说的也太简单,所以我就不用它了。
在桌面上单击鼠标右键(要同时按住shift键),选择“在此处打开Power Shell窗口(S)”,运行
npx create-react-app dry
注意:
- npx要求npm5.2+,而且安装路径不能有空格,如果你的node已经安装在Program Files下了,先全局安装脚手架
npm install create-react-app -g
, 然后再创建工程create-react-app dry
。 - Win10最好使用Power Shell, 以后都不要再用cmd了,用cmd有些包会安装失败,因为有些脚本执行不了
经过这一步我们立马就有了一个node工程,而且是开箱即用的react工程。
react的脚手架帮我们做了很多工作,并且把webpack的很多配置文件都隐藏了起来,项目看起来非常清爽。如果由于某种原因你必须要修改默认的配置,你可以把默认的配置文件“喷”出来。执行npm run eject
后你就会看到项目里多了很多配置文件。要注意脚手架帮你把配置文件整齐的放在了一个抽屉里,你把它倒出来之后又觉得太乱了,想放回去,这就难办了。
一般情况下我们是不需要eject的,如果你非要eject,请三思。
第二步
现在package.json, index.html都有了,还差一个main.js。
从electron-quick-start拷贝一份main.js,放在src目录下:
将mainWindow.loadFile('index.html')
修改为
mainWindow.loadURL('http://localhost:3000')
,注意改为loadURL。
react项目需要编译后才能生成静态文件的,开发时我们需要启动node server。
所以这里要改成URL,内容如下:
const {app, BrowserWindow} = require('electron')
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({width: 800, height: 600})
mainWindow.loadURL('http://localhost:3000')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
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()
}
})
还需要
- 在
package.json
里加一句"main": "src/main.js",
, main.js是electron的启动脚本,在这里创建了一个窗口并加载页面。 - 在scripts里加一句
"electron": "electron ."
哦,我们还没安装electron呢,现在来安装它:
npm install electron --save-dev
注意:别用cnpm安装,不然打包的时候会卡在那里不动,切记。
好了,我们先来测试一下,在dry下启动两个Power Shell, 先运行
npm run start
(或者npm start
),启动好了在另一个shell窗口里运行npm run electron
。
不出意外,你将看到如下画面:
如果你看到的是一片空白。 点击"View >> Toggle Developer Tools",控制台输出
Not allowed to load local resource: file:///C:/Users/XXX/Desktop/dry/index.html。请检查main.js文件,应该是loadURL
,而不是loadFile
。
第三步
开始添加antd,也可以直接看官方文档在 create-react-app 中使用:
①先停掉刚才的服务,连续按3次Ctrl C
。
②npm install antd --save
③为了可以按需加载,我们还需要安装两个东西:
npm install react-app-rewired --save
npm install babel-plugin-import --save
④ package.json的scripts里将react-scripts
替换成react-app-rewired
。
⑤在项目根目录里创建config-overrides.js
,内容如下:
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
// do stuff with the webpack config...
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
config,
);
return config;
};
⑥测试,跟之前一样,分别运行npm run start
和npm run electron
。不出意外你将会看到一个按钮:
试着将"Button",改为"Button666",可以看到electron会自动刷新。按钮显示"Button666"。
到这里就基本告一段落了,但是有些地方我们需要改进一下。
第四步
- 每次都要启动2个进程岂不是很麻烦?
- 我想调试主进程的代码怎么办?
- 我不想使用默认的端口怎么办?
- 测试的时候使用的是localhost,打包的时候怎么办?
- 怎么打包?
- 怎么加一个icon?
- require('xxx')不起作用
这篇文章里用了foreman来管理进程,是个很聪明的方法,可以解决第1个问题,但是没办法解决第2个问题。如果Devtron还可以用的话,那么用foreman会是个非常好的方法,可惜Devtron这个项目不更新了。
其实前2个问题可以一起解决,就是使用VS Code:
假设你已经安装好了VS Code, "File >> Add Folder to Workspace",选择桌面上的dry文件夹。(dry=Do not Repeat Yourself)。
然后"Terminal >> Configure Default Build Task...",选择 "npm: start",会自动生成一个.vscode
文件夹和一个tasks.json
。
在type上面添加一行:"label": "antd",
(重要)
在group下面添加一行:"isBackground": true
。 (重要),
内容如下:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "antd",
"type": "npm",
"script": "start",
"group": {
"kind": "build",
"isDefault": true
},
"isBackground": true
}
]
}
VS Code运行的时候会一直等到task完成后才会启动electron。这是需要的,不然electron会启动失败。
isBackground
的意思是让node 服务一直在后台运行。关闭electron后,netstat -ano | findstr 3000
你会看到node服务仍然在运行。
点击VS Code左侧"Debug(Ctrl+Shift+D)"按钮,然后点击"Configure or Fix 'launch.json'",选择"Node.js", 会自动生成一个launch.json。将这个文件的内容替换成:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"args" : ["."],
"preLaunchTask": "antd"
}
]
}
点击"Start Debugging",你可以看到electron出来了。
在createWindow函数里打一个断点再次点击"Start Debugging",你会看到,程序在断点处停下来了。唿,小功告成。
现在来解决第3个问题。
再这之前你要把占用3000端口的进程杀掉。
netstat -ano | findstr 3000
找到 pid 19420,
然后taskkill /pid 19420 -t -f
方法很简单,就是在运行npm run start
的时候设置环境变量PORT,将端口传进去。windows和*nix平台设置环境变量的方法不一样,为了跨平台我们需要安装一个包:
npm install cross-env --save-dev
将package.json里scripts的start命令替换成"start": "cross-env PORT=5000 react-app-rewired start"
。小功告成。
第4个问题
main.js
里添加2句:
const path = require('path')
const url = require('url')
并将mainWindow.loadURL
替换成如下:
const startUrl = process.env.ELECTRON_START_URL || url.format({
pathname: path.join(__dirname, '/../build/index.html'),
protocol: 'file:',
slashes: true
});
mainWindow.loadURL(startUrl);
在package.json
里添加一句: "homepage": "./"
(非常非常重要)
如果不设置这个属性,编译后会输出如下信息,
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
可以看看编译后的build/index.html里,PUBLIC_URL被替换成了"/", <link rel="manifest" href="/manifest.json">
打包后运行dry.exe只会显示一片空白。
react脚手架假设你的应用是放在web服务器的根目录或者子路径下的。这里设置 "homePage":"./"
,就表示我们的项目是放在当前目录。
设置这个以后,publicPath的值就是"./", 编译的时候会把这个传给webpack,打包后electron才能正确加载。
参考文档的PUBLIC_URL
在launch.json
里添加一句:
"env":{"ELECTRON_START_URL":"http://localhost:5000"}
你会看到现在的端口变成5000了,并且咱们的main.js能“感知”到是否是dev模式。
第5个问题
①先安装打包工具npm install electron-packager --save-dev
②然后编译 npm run build
, 会生成一个build文件夹,优化后的静态资源(html和js)都放在这里了。
③添加打包命令。很简单,直接从electron-api-demos的package.json拷贝一下就完事了。
稍作修改,我们生成64位的exe文件,并且将资源打包一下,文件输出路径为当前目录的output目录。指定exe的名称为dry。
在package.json的scripts里添加如下:
"package:win": "electron-packager ./ dry --out ./output --overwrite --asar=true --prune=true --platform=win32 --arch=x64",
④在dry文件夹下新建assets/app-icon/win目录,然后将准备好的app.ico文件放在这里
⑤执行npm run package:win
第6个问题
很简单,在“package:win”里加一句--icon=assets/app-icon/win/app.ico
。 ico文件可以用.png文件在线转。
第7个问题
在渲染进程里使用window.require
,比如:
const mysql = window.require('mysql2');
,
var ipcRenderer = window.require('electron').ipcRenderer;
参考大神的文章末尾
可能遇到的问题
如果你使用antd的脚手架,并且执行antd-init的时候报如下错误:
antd-init : 无法将“antd-init”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。,请确保环境变量Path里配置了全局包目录:D:\nodejs\node_global
为什么不用Photon或者React-Desktop?
2个我都试过了,效果并不好。尤其用photon,你可能需要require.js之类的来实现按需加载。绑定事件还得用原生的js来写。更麻烦的是以后没办法添加插件。
React-Desktop功能太少,不好用。而且它的Segmented Control组件的样式不好。做桌面小工具不需要菜单栏,这个时候Tab组件就非常重要,所以我放弃
React-Desktop了。
用antd是最爽的,文档清楚,组件丰富,可扩展性也强。
Demo地址
electron+antd详细教程的更多相关文章
- SASS教程sass超详细教程
SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...
- Git使用详细教程(一)
很久不发博客,最近有兴趣想写点东西,但 Live Writer 不支持从Word复制图片,疯狂吐槽下 Git使用详细教程(一) Git使用详细教程(二) 该教程主要是Git与IntelliJ IDEA ...
- Win7 U盘安装Ubuntu16.04 双系统详细教程
Win7 U盘安装Ubuntu16.04 双系统详细教程 安装主要分为以下几步: 一. 下载Ubuntu 16.04镜像软件: 二. 制作U盘启动盘使用ultraISO: 三. 安装Ubuntu系统: ...
- Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境(详细教程)
Windows7 64位系统搭建Cocos2d-x-2.2.1最新版以及Android交叉编译环境(详细教程) 声明:本教程在参考了以下博文,并经过自己的摸索后实际操作得出,本教程系本人原创,由于升级 ...
- Ubuntu 16.04安装QQ国际版图文详细教程
因工作需要,我安装了Ubuntu 16.04,但是工作上的很多事情需要QQ联系,然而在Ubuntu上的WebQQ很是不好用,于是在网上搜索了好多个Linux版本的QQ,然而不是功能不全 ...
- Ubuntu-安装-theano+caffe-超详细教程
一.说明 本文是继<Ubuntu-安装-cuda7.0-单显卡-超详细教程> 之后的续篇.theano和caffe是深度学习库,对运算能力需求很大,最好使用cuda进行加速.所以,请先阅读 ...
- Struts2详细教程
Struts2详细教程:http://www.yiibai.com/struts_2/
- Java log4j详细教程
Java log4j详细教程 http://www.jb51.net/article/74475.htm
- [分享] 从定制Win7母盘到封装详细教程 By BILL ( 10月23日补充说明 )
[分享] 从定制Win7母盘到封装详细教程 By BILL ( 10月23日补充说明 ) billcheung 发表于 2011-10-23 00:07:49 https://www.itsk.com ...
随机推荐
- 本地搭建json-server
1.前言 为了前端项目获取数据,需要在本地搭建json-server,这样保证可以在本地实现增删改查的操作. 2.安装 全局安装: npm -g json-server 3.创建一个json-serv ...
- IOS 生成静态库文件(.a文件)
http://www.cnblogs.com/lyy-5518/p/5459643.html
- Where are your from!!!!!!!!!!!! !Baby! {封装}
在说Java 三个特性之前,我们先了解一下什么是面向对象,以及为什么Java是面向对象的语言. 面向对象是区别于面向过程的一种编程的思想.我们可以通过这个例子冰箱装大象的例子来了解一下面向对象与面向过 ...
- 《XX重大技术需求征集系统》的可用性和可修改性战术分析
题目:阅读<大型网站技术架构:核心原理与案例分析>第五.六章,结合<某重大技术需求征集系统>,列举实例分析采用的可用性和可修改性战术,将上述内容撰写成一篇1500字左右的博客阐 ...
- QT+VS2013 * 获取网络时间
使用qt函数获取网络时间 现在Qt Project Setting中的Qt Modules勾选NetWork,再导入头文件我也忘了叫什么了 QStringList net_time; QTcpSock ...
- 网页真机调试之Browsersync简介
以前的调试方式 修改完项目文件(html.js.css等)后保存,在浏览器刷新页面查看修改后的效果 本地开启一个 tomcat 服务,修改文件后保存刷新页面,移动端或其他 pc 则需要输入 ip + ...
- python 解析命令行
python中的命令行解析最简单最原始的方法是使用sys.argv来实现,更高级的可以使用argparse这个模块.argparse从python 2.7开始被加入到标准库中,所以如果你的python ...
- win10刻录光盘失败,一直显示有准备好写入到光盘中的文件
这是因为前面刻录留下的缓存导致的 解决方法是,删除系统刻录缓存文件 刻录缓存路径大概在以下位置(其中ase那个地方需要修改,改成自己的登录用户账号名即可) C:\Users\ase\AppData\L ...
- Cygwin,一个提供linux命令行体验的Windows命令行工具
安装 从官网下载,选择合适节点(带edu结尾的优先),安装 使用 未完待续...
- java8_api_正则表达式
正则表达式 什么是正则表达式 使用String类中的replaceAll方法 使用Pattern类编译正则表达式 使用Matcher类匹配正则表达式 什么是正则表达式 ...