electron 前端开发桌面应用
2018-09-19 09:29 muamaker 阅读(2905) 评论(0) 编辑 收藏 举报electron是由Github开发,是一个用Html、css、JavaScript来构建桌面应用程序的开源库,可以打包为Mac、Windows、Linux系统下的应用。
快速开始
接下来,让代码来发声,雷打不动的hello world
创建文件夹,并执行npm init -y
,生成package.json
文件,下载electron
模块并添加开发依赖
mkdir electron_hello && cd electron_hello && npm init -y && npm i electron -D
下载速度过慢或失败,请尝试使用cnpm,安装方式如下
# 下载cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org # 下载electron cnpm i electron -D
创建index.js,并写入以下内容
const {app, BrowserWindow} = require('electron') // 创建全局变量并在下面引用,避免被GC let win function createWindow () { // 创建浏览器窗口并设置宽高 win = new BrowserWindow({ width: 800, height: 600 }) // 加载页面 win.loadFile('./index.html') // 打开开发者工具 win.webContents.openDevTools() // 添加window关闭触发事件 win.on('closed', () => { win = null // 取消引用 }) } // 初始化后 调用函数 app.on('ready', createWindow) // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上,除非用户用 Cmd + Q 确定地退出, // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上,当单击dock图标并且没有其他窗口打开时, // 通常在应用程序中重新创建一个窗口。 if (win === null) { createWindow() } })
创建index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1 id="h1">Hello World!</h1> We are using node <script> document.write(process.versions.node) </script> Chrome <script> document.write(process.versions.chrome) </script>, and Electron <script> document.write(process.versions.electron) </script> </body> </html>
最后,修改packge.json
中的main字段,并添加start命令
{ ... main:'index.js', scripts:{ "start": "electron ." } }
执行npm run start
后,就会弹出我们的应用来。
模版
electron-forge包含vue
、react
、Angular
等开箱即用的模版
npm i -g electron-forge electron-forge init my-app template=react cd my-app npm run start
打包
怎么将我们开发好的应用打包成.app
或.exe
的执行文件,这就涉及到了重要的打包环节, 这里使用electron-quick-start项目进行打包
目前,主流的打包工具有两个electron-packager和electron-builder
Mac打包window安装包需下载wine
brew install wine
如果有丢失组件,按照报错信息进行下载即可
electron-packager
electron-packager把你的electron打包成可运行文件(.app, .exe, etc)
执行npm i electron-packager -g
进行安装
electron-packager .
快速打包
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --out=out --icon=assets/app.ico --asar --overwrite --ignore=.git
- sourcedir 项目入口 根据package.json的目录
- appname 包名
- platform 构建平台 包含
darwin, linux, mas, win32 all
- arch 构建架构 包含
ia32,x64,armv7l,arm64
- out 打包后的地址
- icon 打包图标
- asar 是否生成app.asar, 不然就是自己的源码
- overwrite 覆盖上次打包
- ignore 不进行打包的文件
第一次打包需要下载二进制的包耗时会久一些,以后走缓存就快的多了。
electron-builder
electron-builder是一个完整的解决方案,对于macos、windows、linux下的electron app,它可以提供打包及构建的相关功能。同时,它还提供开箱即用的“自动更新”功能支持
npm i electron-builder -D
下载
electron-builder
打包
坑坑坑
第一次打包的时候会比较慢,如果你和我手欠直接退出了,再次打包的时候,恭喜你,出错了。
问题是在下载.zip包的时候,中断了操作,以后所有执行打包的时候,找不到那个文件(或者是残缺的文件)就报错了,需要手动清除下缓存 缓存路径在~/Library/Caches/electron/
常用参数
electron-builder
配置文件写在package.json
中的build
字段中
"build": { "appId": "com.example.app", // 应用程序id "productName": "测试", // 应用名称 "directories": { "buildResources": "build", // 构建资源路径默认为build "output": "dist" // 输出目录 默认为dist }, "mac": { "category": "public.app-category.developer-tools", // 应用程序类别 "target": ["dmg", "zip"], // 目标包类型 "icon": "build/icon.icns" // 图标的路径 }, "dmg": { "background": "build/background.tiff or build/background.png", // 背景图像的路径 "title": "标题", "icon": "build/icon.icns" // 图标路径 }, "win": { "target": ["nsis","zip"] // 目标包类型 } }
更多本教程来源于掘金,详细资料参考:https://juejin.im/post/5ba06b67f265da0ae343e89c?utm_source=gold_browser_extension#heading-29