用electron写桌面应用
说起桌面应用,想必大家使用过的就已经海了去了。什么暴风影音、QQ、skype之类的,早已不是新鲜事!不过大家有没有了解过如何编写一个桌面应用?历史上,我们都有哪些方式去编写桌面应用呢?
实际上,桌面应用的历史并不算久远,不去查找各种资料,仅凭记忆,我能想到的曾经出现过的桌面应用编写语言就有:C++
、Delphi
、VB
、winForm
、WPF
、swing
、awt
、QT
、flash
、Objective-C
、Swift
...或许还有更多。
学习成本是不是有点高?这么多语言\技术!!如果你恰好还碰到了一个吹毛求疵的老板或者PM,他就是那么迫切的希望自己的app能够多平台发布(也不管在那些平台上是否有客户),作为程序员的你,肿么办?是勇挑大梁,然后各技术栈学习失败,最终自尽以谢老板?还是果断离开?
当然都不是,够懒的程序员应该寻找更容易实现,又能满足老板需求的解决方案。那么,我们来看看今天的话题,electron吧!
electron是什么?
根据官网的描述,electron
是一种可以使用网页技术来开发跨平台桌面应用的解决方案!感受一下,用你已知的技巧html
、javascript
、css
就能写桌面应用,是不是想想就有点儿小激动?!
谁在用electron?
著名的前端界IDEAtom就是使用electron
编写的,震颤了有不有?
看看还有哪些著名的应用是基于electron
编写的:
那么接下来,让我开始吧!
准备工作
安装nodejs
安装yeoman
使用程序生成器
npm install -g generator-electron-naive
如果使用
unix like
操作系统,请在命令前加sudo
创建项目
那么我就先来一个简单的叫todo
小应用:
yo electron-naive
当键入上述命令后,生成器会有一系列问题问你,按需回答即可:
问题中的
Use remote URL
是指,是否想直接加载一个远程的URL?如果选"是",那么会再要求你输入精确地址
调试
cd todo
npm run dev
上述命令操作完后,会有如下应用界面打开:
找到todo/src/index.html
,用你喜欢的IDE打开,然后拷贝如下代码覆盖index.html
原先的内容:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>TODO</title></head><body><ul id="todolist"></ul><form action="#" method="post"><div><label for="newitem">Add item</label><input type="text" name="newitem" id="newitem" placeholder="new item" /><input type="submit" value="Add" /></div></form><script>var todo = document.querySelector('#todolist'),form = document.querySelector('form'),field = document.querySelector('#newitem');form.addEventListener('submit', function(ev) {var text = field.value;if (text !== '') {todo.innerHTML += '<li>' + text + '</li>';field.value = '';field.focus();}ev.preventDefault();}, false);todo.addEventListener('click', function(ev) {var t = ev.target;if (t.tagName === 'LI') {t.parentNode.removeChild(t);};ev.preventDefault();}, false);</script></body>
</html>
再来看我们app界面,变成了如下样子:
生成应用程序包
之前生成项目的过程中,在“Which platform you'd like to package to?”这个问题里,你可选择将来要支持的操作系统,以便生成相应的打包代码。
那么现在我们就来生成一个程序包吧:
npm run dist
最后生成的可执行程序出就现在了如下位置:
愉快的双击使用吧!!!
用electron写桌面应用相关推荐
- js桌面应用 Linux,从 1 到完美,用 js 和 electron 写一个桌面应用
从 1 到完美,用 js 和 electron 写一个桌面应用 目前用 js 和前端技术写桌面软件的方案主要有两种:electron 和 nw.js.这两者在底层实现上有所不同,简单的说,electr ...
- 2021了,你还不会用 Electron 写一个桌面应用?
正如 Electron 官方所说"如果你可以建一个网站,你就可以建一个桌面应用程序". 作为一个跨平台的桌面应用开发框架,Electron 的迷人之处在于,它是建立在 Chro ...
- electron 托盘图标闪烁_从零到一,用 Electron 开发桌面效率工具
Electron 已经不算新技术,最早是 github 从 Atom 编辑器衍生出来的框架.通过编写 Javascript, HTML, CSS 能快速编译出跨系统的桌面 app.Electron 的 ...
- python可以写桌面软件吗-python能写桌面程序吗
其实Python/Java/PHP都不适合用来做桌面开发,Java还是有几个比较成熟的产品的,比如大名鼎鼎的Java集成开发环境IntelliJ IDEA.Eclipse就是用Java开发的,不过PH ...
- python能写桌面程序吗_python能写桌面程序吗
其实Python/Java/PHP都不适合用来做桌面开发,Java还是有几个比较成熟的产品的,比如大名鼎鼎的Java集成开发环境IntelliJ IDEA.Eclipse就是用Java开发的,不过PH ...
- Electron开发桌面应用
由 Bazzzinga威 同学翻译自 Medium.https://medium.com/developers-writing/building-a-desktop-application-with- ...
- 新星计划 Electron+vue2 桌面应用 2 搭建及运行
基础内容:新星计划 Electron+vue2 桌面应用 1 基础_lsswear的博客-CSDN博客 根据使用过的经验和官网的描述,大概可以有四种方式: 自己创建项目(仅使用npm) 用Electr ...
- go语言适合写桌面程序吗?
目前来看,Go语言并不适合写桌面程序.前面我也回答过一篇关于Go语言是否适合发展成桌面程序的问题. 我们必须承认,任何一门语言,在发展和壮大的过程中,甚至其被推广使用的过程中,不仅是受其自身语法特性的 ...
- 使用 AngularJS 和 Electron 构建桌面应用
使用 AngularJS 和 Electron 构建桌面应用 GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨 ...
最新文章
- Redis概述和基础
- 在linux上装git教程,教你玩转Git-Linux 平台上安装
- 22种代码坏味道及重构手段
- ActiveRecord学习(六):总结
- B 站 Up主自制秃头生成器,圆你一个秃头梦?
- 【Flink】Flink 写入 AnalyticDB MySQL
- frontend-tools
- MySQL可视化工具之SQLyog小海豚
- 网络编程(二)- 检查网络的工具
- 图像表头数据读取,图像数据块读取,图像类型转换
- 获取服务器端的webapps路径
- 简单excel宏工具对数据进行脱敏
- 图数据库neo4j的编程语句(详解)
- seata xid是什么_微服务分布式事务解决方案-springboot整合分布式seata1.3.0
- css3+html5——机器猫哆啦A梦+手、脚、头动起来!
- 外网电脑配置8G运行内存,运行Android Studio,速度很轻松
- js事件on动态绑定数据,绑定多个事件
- TiDB 报错: GC life time is shorter than transaction duration
- 数据中心编码命名标志标签的建议规范
- 图像处理方面的sci期刊_图像处理领域的SCI期刊.doc
热门文章
- 2020恩智浦智能车大赛规则_2020年世界人工智能围棋大赛落幕,各路围棋AI共同论道...
- 计算机网络中seq,计算机网络A卷及参考答案
- 一、Team Explorer的安装
- 优秀的 jQuery 文本输入框自动完成 自动提示插件
- Objective-C 2.0 with Cocoa Foundation--- 6,NSObject的奥秘
- 动态规划——最长公共子序列(算法设计课题)
- Kinect v1和Kinect v2的彻底比较
- 安装图像标注工具Labelme并使用其制作自己的数据集
- 页眉中字数未满但自动换行
- C/C++——++i、i+=1、i++之间的区别(附在学习boost时遇到的例子)