electron 图片压缩工具
- mac
- win
下载
Macwindowslinux- download
实现简单的压缩图片功能（png、jpg、jpeg）
- 可以通过调整图片质量压缩图片
- 可以调整图片实际宽度和高度
- 支持
tinify上传压缩图片，tinify
Electron 相关知识
-
主进程
1、一个 Electron 应用总是有且只有一个主进程 2、在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互 -
渲染进程
在主进程中使用"BrowserWindow"就可以创建页面，每个"BrowserWindow"运行在自己的渲染进程里面
Electron API 的核心特
- API相关参考
- 主进程与渲染进程间通信
ipcMain与ipcRenderer - 不同窗口间的通信
- 通知
- 拖拽
- 菜单设置
electron.app上的一些方法remote.app.getPath('desktop'), 获取路径- 详见
开发环境搭建 参考项目
npm run start-renderer-dev启动渲染进程npm run start-main-dev启动主进程webpack配置主要需要注意构建目标target配置，对于主进程使用electron-main,渲染进程electron-renderer。 详见
本地开发项目运行
-
npm start"start": "concurrently \"wait-on http://localhost:3000/ && npm run start-main-dev\" \"npm run start-renderer-dev\"" 先启动webpack3000端口的本地服务，再启动"electron" "wait-on" 的作用：等待"http://localhost:3000/"就绪，之后再启动"electron" -
npm run pack用于分析 -
npm run dist打包成安装包 -
npm run release打包并发布
压缩图片使用的工具 sharp sharp
-
sharp在electron中使用，需要重新编译 -
第一种方法：electron-rebuild
package.json 配置 "scripts": { "postinstall": "npx electron-rebuild" } 在npm install之后，执行electron-rebuild进行重新编译即可，electron-rebuild只会重新编译，dependencies中的包 -
第二种方法：
- node-gyp手动编译参考
- preinstall.sh 手动编译脚本，在
npm install之前就下载编译好sharp
tinify 的使用
tinify api详见
npm install --save tinify
本地开发时的一些问题
-
electron换源安装- electron换源
- electron安装脚本 preinstall.sh
# 在国内打包的会后会下载 "https://github.com/electron/electron/releases/download/v7.1.2/electron-v7.1.2-darwin-x64.zip", # 这样的文件，特别慢，就算我翻了墙也慢 # 解决办法，使用国内镜像源安装
-
sharp换源安装
-
electron-builder换源安装打包所需要的资源// 设置electron-builder下载electron的源 "build": { "electronDownload": { "mirror": "https://npm.taobao.org/mirrors/electron/" }, }- 有一些打包时需要的依赖包，是换不了源的，只能等待他正常安装
- 比如：windows 下载 winCodeSign 这个文件不大，稍微等会也能下完
Electron 打包相关
-
electron-builder详细配置参考： -
安装
electron-buildernpm i electron-builder -D -
配置介绍
"build": { "appId": "mokeCompress", // 应用的id "productName": "Moke-Compress", // 应用的名称 "copyright": "Copyright © 2019 ${author}", // 版权信息 // 需要打包的文件 "files": [ "build/**/*", "node_modules/**/*", "package.json" ], "directories": { // 应用图标、任务栏图标等资源的地址 "buildResources": "assets" }, "extraMetadata": { // webpack打包之后的主进程入口文件 "main": "./build/main.js" }, // 用于发布的相关配置 "publish": [ "github" ], "extends": null, // Mac安装包相关配置 "mac": { // 应用的分类 "category": "public.app-category.productivity", // 安装包名 "artifactName": "${productName}-${version}-${arch}.${ext}" }, // mac .dmg格式安装包，配置 "dmg": { "background": "assets/appdmg.png", "icon": "assets/icon.icns", "iconSize": 100, "contents": [ { "x": 380, "y": 280, "type": "link", "path": "/Applications" }, { "x": 110, "y": 280, "type": "file" } ], "window": { "width": 500, "height": 500 } }, // windows 配置 "win": { "target": [ "msi", "nsis" ], "icon": "assets/icon.ico", "artifactName": "${productName}-Web-Setup-${version}.${ext}", "publisherName": "成雨" }, "nsis": { "allowToChangeInstallationDirectory": true, "oneClick": false, "perMachine": false }, // linux配置 "linux": { "target": [ "deb", // deb 是 ubuntu 、debian 的格式 "rpm" // rpm 是 redhat 、fedora 、suse 的格式 ], // 安装包名 "artifactName": "${productName}-Web-Setup-${version}.${ext}" } } -
打包优化
主要思路：(js、css、html....)等资源，先用`webpack`打包， 再将打包好的静态资源，使用`electron-builder`打包进安装包里面 -
分析安装包内容
app.asar
# 安装 asar npm install -g asar # 解压到 ./app 文件夹下 asar e app.asar ./app
打包发布配置，自动发布release
-
package.json配置{ "build": "publish": ["github"] } } -
生成 GitHub personal access token add token, 生成token后添加如下配置，将
GH_TOKEN添加到环境变量中，当npm run release运行的时候，electron-builder会自动 帮我们上传到 github release"release": "cross-env GH_TOKEN=e9780fa2016917b730babef1371b3593a58a99b5 electron-builder", -
注意：token不要放在代码里一起上传到github，这是不安全的，上传之后会造成
release发布失败
应用打包，生成安装包
npm run pack本地开发时，用来分析包内容时使用npm run release打包发布，生成一个release版本
github actions 持续集成
-
设置环境变量
GH_TOKEN
-
该项目完整配置
name: Create Release on: push: branches: - master jobs: build: name: node版本 ${{ matrix.node_version }} 操作系统 ${{ matrix.os }} runs-on: ${{ matrix.os }} # 环境运行矩阵，会同时在mac、windows、ubuntu下运行 strategy: matrix: node-version: [10.x] os: [macOS-latest, windows-latest, ubuntu-latest] steps: - uses: actions/checkout@v1 - name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - name: npm install, build # release 发布上传功能，由electron-builder提供 （npm run release） run: | npm ci npm run release # 环境变量 env: CI: true GH_TOKEN: ${{ secrets.GH_TOKEN }} NO_LOCAL: true
知识点
-
拖放(Drag 与 drop)
在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件 ondrop - 在一个拖动过程中，释放鼠标键时触发此事件 -
Html5 通知,
Notifications API的通知接口用于向用户配置和显示桌面通知let notification = new Notification(title, options) title 一定会被显示的通知标题 options 可选 一个被允许用来设置通知的对象。它包含以下属性： dir : 文字的方向；它的值可以是 auto（自动）, ltr（从左到右）, or rtl（从右到左） lang: 指定通知中所使用的语言。这个字符串必须在 BCP 47 language tag 文档中是有效的。 body: 通知中额外显示的字符串 tag: 赋予通知一个ID，以便在必要的时候对通知进行刷新、替换或移除。 icon: 一个图片的URL，将被用于显示通知的图标。