去年的时候看到公众号推文好多都提到了electron和flutter,那时候懒,一直没能够去主动了解相关的知识。最近部门同事分享了用shell脚本或谷歌插件处理日常的一些重复行为,脑子里想到了之前每次上传指定大小图片的时候都是登录qq或微信,利用截图功能来截取对应大小的图片,每次调整那1px的距离的时候都快抓狂了。electron就是开发桌面应用的,何不用electron来实现这个功能,只有输入宽高,就生成指定尺寸的图片,然后图片的背景色指定自定义,不填就随机给个颜色。奈斯,明确了自己的需求点,可以愉快的学习啦~~~
开始之前提下相关版本情况:
node: 12.13.0 electron: 8.2.5 复制代码
安装过程中发现一直卡在install那一步,当前已经是淘宝源了,发现还需要加一下配置:
npm config list查看userconfig位置
找到.npmrc文件的地址之后,在该文件中添加一句
electron_mirror="https://npm.taobao.org/mirrors/electron/"
好了,现在就可以执行 npm install -g electron
electron提供了示例仓库,可快速启动
git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install && npm start 复制代码
自己日常的开发习惯是react+ts+antd,如果是这种环境到时开发功能也比较顺手
create-react-app my-tools --template typescript cd my-tools npm start 复制代码
此时看到的是经典的react启动页
npm install antd --save
npm install babel-plugin-import --save-dev
npm i -D react-app-rewired cross-env customize-cra
react-app-rewired2.x以后需要安装customize-cra来实现修改webpack配置
安装之后需要修改下package.json中scripts的一些配置,主要是将 start、build、test
命令的react-scripts改成react-app-rewired,最终如下:
/* package.json */ "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", } 复制代码
antd需要按需加载
/* config-overrides.js */ const { override, fixBabelImports, } = require("customize-cra"); module.exports = override( fixBabelImports("import", { libraryName: "antd", libraryDirectory: "es", style: 'css', }), ); 复制代码
修改了APP.tsx文件的代码,然后在react-app-env.d.ts
中加了些style的定义,并且把tsconfig.json
中的strict改成了false,启动项目之后页面如下:
npm i -D electron
/* main.js */ const { app, BrowserWindow } = require('electron'); const path = require('path'); let mainWindow = null; const createWindow = () => { let mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, } }); /** * loadURL 分为两种情况 * 1.开发环境,指向 react 的开发环境地址 * 2.生产环境,指向 react build 后的 index.html */ const startUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : path.join(__dirname, "/build/index.html"); mainWindow.loadURL(startUrl); 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": "main.js", "author": "xuanye", "description": "个人工具集", "scripts": { "start": "cross-env BROWSER=none react-app-rewired start", "start-electron": "cross-env NODE_ENV=development electron .", "start-electron-prod": "electron ." }, 复制代码
一个命令行窗口跑 react 项目
npm run start
另一个命令行窗口跑 electron 项目
npm run start-electron
启动之后会出现如下窗口内容
关于为什么要起两个命令行窗口,其实我们在 main.js
文件中已经写明了开发环境下我们加载的是3000端口的内容,如果你不启动react项目,那么跑electron命令的时候创建的就是个空的桌面应用。
npm i -D electron-builder
制作icon图标
图标名称必须含有256
nsis配置项的内容根据需要自行配置
/* package.json */ "homepage": ".", // 避免css等资源找不到的情况 "scripts": { "build-electron": "electron-builder" }, "build": { // 软件包名 "appId": "com.xxx.xxx", // 项目名,也是生成的安装文件名 "productName": "工具集", // 版权信息 "copyright": "Copyright © 2020", // 不配置extends为null打包的时候会报错:Application entry file "build/electron.js" does not exist "extends": null, "directories": { // 输出文件路径 "output": "build-electron" }, "files": [ "./build/**/*", "./main.js", "./package.json" ], "win": { // win相关配置 "icon": "./favicon_256.ico", /* 打包生成的启动文件的命名方式 */ "artifactName": "${productName}.${ext}" }, "nsis": { // 是否一键安装,不可更改目录等选项,默认为true "oneClick": false, // 是否允许权限提升。如果为false,则用户必须使用提升的权限重新启动安装程序。 "allowElevation": true, // 是否允许更改安装路径 "allowToChangeInstallationDirectory": true, // 是否创建桌面图标 "createDesktopShortcut": true, // 创建开始菜单图标 "createStartMenuShortcut": true, // 安装完成请求运行 "runAfterFinish": true, // 安装包图标 "installerIcon": "./favicon_256.ico", //卸载程序图标 "uninstallerIcon": "./favicon_256.ico", // 安装时头部图标 "installerHeaderIcon": "./build/icons/aaa.ico", // 桌面图标名称 "shortcutName": "工具集" } }, 复制代码
打包react项目npm run build
(根目录下会生成build文件夹,存放打包之后的内容)
运行 npm run start-electron-prod
查看生产环境功能是否正常运行
功能验证没问题之后就可以项目打包成安装包 npm run build-electron
,安装包所在路径为 package.json
中指定的 build-electron 目录
打包慢问题,需要下载去官网下载对应版本的包,解压到本地
下图的报错是需要把图片的文件名包含256
之后打包发现一直卡在下载winCodeSign-2.6.0,去https://github.com/electron-userland/electron-builder-binaries/releases/tag/winCodeSign-2.6.0下载对应版本的winCodeSign(记得切换成你需要的版本),然后下载source code(zip)文件,
然后发现变成卡在nsis,去https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-3.0.4.1下载对应版本的nsis(记得切换成你需要的版本),然后下载source code(zip)文件,
然后发现变成卡在nsis-resource,将上一步文件中的nsis-resource文件夹拷过来,
展示下想要文件命名
打包成功之后就能在根目录下看到build-electron文件夹,里面有可执行的exe文件,点击即可安装
author和description必填
图片必须是256 * 256
如果不配置nsis那么应用程序就会自动的安装在C盘
查看asar文件
npm install -g asar
在asar文件所在的根目录执行asar extract app.asar ./
指令,asar extrct
指令有两个参数,第一个是需要解压缩的asar文件,第二个参数是解压缩之后文件存放的路径,“./”是指放在根目录。