electron 前端开发桌面应用
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 winfunction 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
转载于:https://www.cnblogs.com/muamaker/p/9672755.html
electron 前端开发桌面应用相关推荐
- Electron前端开发桌面程序--入门篇
前言 前端开发桌面程序这个概念已经出现有一段时间了,这项技术也已经走向成熟,Github上nw和光electron的star就差不多有10w颗星了,github也衍生出了很多开源的桌面项目俨然成了一个 ...
- 前端开发桌面终极工具(FastStone Capture)推荐(转)
前端开发桌面终极工具(FastStone Capture)推荐 Posted on : 26-03-2009 | By : 愚人码头 | In : 前端工具 2 FastStone Capture是一 ...
- macos安装python-nodejs_nodejs(1):mac 安装nodejs amp; electron 环境开发桌面应用
1,下载node安装包 Electron 是 Github 发布跨平台桌面应用开发工具,支持 Web 技术开发桌面应用开发,其本身是基于 C++ 开发的,GUI 核心来自于 Chrome,而 Java ...
- 前端开发桌面软件、技术博客整理等
整理桌面 渐渐的发现,很多东西存储在本地,永远不如放在云端,很多需要记录的东西,换台电脑,原来的东西可能找不到了,整理的过程是繁琐的,但是结果却是很方便. 记录来盈嘉互联后电脑安装的软件 马克飞象.t ...
- 前端判断是否安装桌面应用_前端开发人员的桌面应用神器 Electron
01 为什么用 JavaScript 来开发桌面应用? 曾经的 JavaScript 脆弱.简陋.甚至有被边缘化的危险,不过 JavaScript 在经过了两次飞跃后(以 V8 为首的 JavaScr ...
- java web打包神器_前端开发人员的桌面应用神器 Electron
原标题:前端开发人员的桌面应用神器 Electron 01 为什么用 Java 来开发桌面应用? 曾经的 Java 脆弱.简陋.甚至有被边缘化的危险,不过 Java 在经过了两次飞跃后(以 V8 为首 ...
- 前端开发人员的桌面应用神器 Electron
01 为什么用 JavaScript 来开发桌面应用? 曾经的 JavaScript 脆弱.简陋.甚至有被边缘化的危险,不过 JavaScript 在经过了两次飞跃后(以 V8 为首的 JavaScr ...
- 【Electron】用前端技术开发桌面应用(一)
由于最近工作需求,紧急学习electron相关的技术知识,关于node.js的相关问题,后续会继续更新. [electron]简介及作用: electron的基本组成:Chromium + Node. ...
- vue引用electron_前端跨平台桌面开发技术:Electron 快速起步
嗨,我是勾勾.今天要介绍的是 Electron 跨平台桌面应用开发. Electron(https://electronjs.org/)是一个运行平台,它能够让我们通过 HTML + CSS + Ja ...
最新文章
- cocos2d-x 2.0启用HD高清图片支持
- ECShop 增加收藏商品排行榜功能
- [刘阳Java]_Web前端入门级练习_迅雷官宣网设计
- Koa2框架从0开始构建预告片网站
- Windows Form -----内容(2)
- 牛客 contest893 G-Truthman or Fakeman
- LeetCode 514. 自由之路(记忆化递归 / DP)
- 《大数据》多名编委当选CCF第十二届理事会成员!
- 目录浏览器对话框控件 c# 1614822374
- Java 初学者建议
- 书籍-Linux运维之道
- Java对接百度翻译API
- 数据库mysql5.7 sqlyog的安装
- 《老路用得上的商学课26—30》经济模式
- [Qt]QLabel的显示圆形
- C++引用---纯属娱乐
- 转 研发团队绩效评定机制细则。
- Stencil计算GPU性能建模
- 无人值守u盘安装linux,U盘无人值守安装Linux操作系统
- java 字节码查看_一种查看java字节码时显示方法调用关系图的方法与流程
热门文章
- ONNX系列四 --- 使用ONNX使TensorFlow模型可移植
- 在.NET单元测试中使用嵌入式资源
- 计算机的工作原理是二进制原理吗,电子计算机的工作原理基于二进制。()
- mysql是表级锁还是行级锁_带你了解MySQL数据库中的全局锁、表级锁、行级锁
- ubuntu无法登陆mysql_ubuntu11.04mysql报错、无法正常工作、无法登陆mysql
- java list 取两条_java list集合中有多条数据随机两条一组
- uuid重复_0519-如何解决Cloudera Manager主机页面出现重复主机异常
- 怎么用计算机求浮动额,2015计算机一级考试MSOFFICE上机综合训练(5)
- mysql 指令没有用_Mysql指令
- mysql数据库优化语句_【MySQL】10条SQL优化语句,让你的MySQL数据库跑得更快!