最近有计划去写桌面程序,所以呢,我打算写一篇博客来记录使用21世纪逼格最高的技术的入门文档。
electron 的混合桌面之路
首先假装很厉害的样子介绍一下Github 官方制作的Atom代码编辑器,这个编辑器是使用electron技术开发的号称21世纪最富有变化的可扩展的编辑器(A hackable text editor for the 21st Century)。
- 界面简单直观,代码高亮,智能提示补全的功能都还算强大贴心
- 它可拥有灰常多的插件,插件的编写也十分便利,javascript就可以为其写插件
- 最重要的是它让无数人看到了HTML/CSS/JS桌面程序的未来
electron 究竟是个啥?
一句话:这是个在node.js平台上运行的为了一些专门的功能而制作的浏览器
node.js: 一个编程专用的浏览器环境,可写javascript
electron: 打包了一个特制的chrome浏览器和node.js ,然后我们加载网页就行了,嚯嚯哒
那么,怎么使用这个electron,牛的很的技术呢
主要有以下几个步骤:
- 下载并安装node.js
- 检查node.js和npm是否安装成功(npm就是node.js 的一个商店,专门提供各种小功能【各种模块】)
- 下载electron,注意:在线安装不行的话请出门右转选择离线安装
- 安装electron或者直接使用
- 编写第一个应用
1.下载并安装node.js
node.js官网:https://nodejs.org/en/ 建议下载 4.x的版本,这个版本已经实现对ES6不错的支持了
2.检查node.js和npm是否安装成功
- 命令行:node -v
- 命令行:npm -v
3.下载electron
electron官网:http://electron.atom.io/ PS.应该是,我觉得
GitHub 坐标:https://github.com/electron/electron api 官方文档才是解决问题的王道
中文翻译官方文档:https://github.com/electron/electron/tree/master/docs-translations/zh-CN
3. npm 在线下载
- 命令行:npm install electron -g (加g 全局安装,自动添加到环境变量)
- 命令行:cd your-app-path
- 命令行:electron .\ (应用跑起来)
- 1
- 2
- 3
- 4
4. 离线下载
->到各家镜像网站摸一个electron下来 对应平台摸搞错了,很尴尬的
宝宝镜像:https://npm.taobao.org/mirrors/electron/
GitHub:https://github.com/electron/electron/releases
csdn 下载频道:地址忘了,自己找,我才懒得翻历史记录呢
4.安装electron或者直接使用
如果上面的步骤没有出现错误提示,那么直接使用即可,: D
- 命令行:electron .\ (你编写的应用的那个文件夹下执行)
- 离线安装的同学,请戳开electron.exe 把那个文件夹甩进去
5.编写第一个应用
- 随便弄个文件夹,新建一个文件:package.json
-
打开package.json,写入如下内容
{ "name": "你弄啥", "version": "0.0.1", "main": "main.js" }
- 1
- 2
- 3
- 4
- 5
JSON格式
- name -> 你的应用名字
- version -> 版本号
- main: ->程序的主逻辑文件,node.js的写法
-
编写main.js,写入内容如下
var electron = require('electron');
//寻求node.js的一个模块 electron ,并生成对象electron
//PS.早期版本的electron用的是app模块和browser-window模块
var {app} = electron;
//{app} 是一个electron对象,控制整个应用,管理所有
var browserWindow = electron.BrowserWindow;
//browserWindow 对象被创造成一个electron的浏览器窗口对象
var mainWindow;//表示主窗口
function createWindow() {
mainWindow = new browserWindow({height:600,width:800});
//打开一个浏览器窗口,800×600
mainWindow.loadURL('file://' + __dirname + '/app.html');
//打开当前目录的app.html
}
app.on('ready',createWindow);
//{app}订阅了一个ready事件,
//这个事件会在整个应用启动过程完成后发生,此时会自动调用createWindow函数做一些事情了
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
剩下的事情就是如何编写页面了,看官方文档吧,骚年!
我感觉优化的好的的话,以后Photoshop都可以用electron写!
当然C/C++的功底是必须的,哈哈!
PS. 现在可以用ES6写electron了,兼容性问题不大!
electron 参考工具链:http://electron.atom.io/community/
LOL全新客户端也要用electron(准确的说的是直接编译的CEF)
相关推荐
electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程electron-quick-start-master 快速入门教程...
一套使用electron-vue开发的桌面应用界面模板,解决最大最小化问题,解决主题变色问题,解决登录窗体透明问题,接着编写vue页面即可
包含精灵球,数码宝贝,多啦A梦的虚拟桌面宠物。 支持功能如下: 1.支持宠物资源自定义上传。 2.支持直播推流。 3.支持鼠标点击宠物。 4.支持宠物事件穿透。 5.支持宠物右键功能菜单,行走,跑动,跳跃,离开,攀爬...
electron开发桌面程序windows+mac操作系统安装,集成前端react+ant design UI
electron入门.pptx
收集了多个用electron写的桌面app,很具有教学意义
主要介绍了基于Electron实现桌面应用开发代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
该项目里面有很多视频教程,会让一个不会用electron的人入门,非常适合新手学习和使用。里面不仅含有视频教程内容,更含有源码和讲义,非常齐全。
ELectron开发-编写-运行-打包 最后使用NSIS打包成exe安装包完整详细教程
适合新手开发 JavaScript + css + electron 的简单前端桌面应用程序,有需要的小伙伴可以下载,文档在主页中的“electron的基本使用” 中,可结合看 ,自己一笔一笔看视频敲的,其中有很多注释帮助理解。
基于vue3+vite搭建一个简单的electron桌面图形化项目源码.zip基于vue3+vite搭建一个简单的electron桌面图形化项目源码.zip基于vue3+vite搭建一个简单的electron桌面图形化项目源码.zip基于vue3+vite搭建一个简单的...
基于Electron + Vue的桌面音乐助手的设计与实现.pptx
适用于MAC&WIN的桌面应用程序 配置 win set ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" liunx export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/" yarn yarn config set ...
期末大作业基于Electron+Vue构建的桌面音乐播放器源码。 特性 支持音乐频谱 界面友好,支持皮肤切换 跨平台,可打包Windows、Mac、Linux 良好的架构模式和代码风格 提供支持主流的第三方音乐平台 期末大作业基于...
electron vue3 ffmpeg 推流开发桌面应用 本项目实现以下几点功能: 1.html video 播放 .flv 格式 推流; 2.实现本地推流,或输入指定地址推流 3.本项目为electron开发项目 4.本项目采用vue3 typescript 开发; 5.可...
钉钉桌面版,基于electron和钉钉网页版开发,支持Windows、Linux和macOS
linux系统下离线安装electron
electron+vue 利用javascript构建桌面应用程序
在electron中集成vue+vite框架开发桌面程序,此处是源代码,使用说明可以查看在线文档https://blog.csdn.net/BDawn/article/details/133887110
基于Electron+Layui桌面端开发的一款闹钟.zip