简单讲解electron的起源 — 学习 – 从入门到放弃!
仿qq项目地址
启动
- npm install
- npm run dev
效果图 登录页:
- 进度:已完成 – 简易登录页,简易聊天页
- 目的:学习electron的开发
- 技术栈:electron + vue全家桶 + elementUi + frozenui
- 学习参考文章:苏南大叔的博客–electron官网–electron-VUE官网
- electron入门-简单传值
- electron用react快速搭建项目
[外链图片转存失败(img-tALmh84R-1563415391350)(https://github.com/yuanxin42/qq/blob/master/img/QQ图片20190712100207.png)]
Electron是什么?
这是一个由GitHub的工程师Cheng Zhao(又名zcbenz)发起的开源项目,Electron是一个实时框架,允许您使用HTML5,CSS和JavaScript创建桌面应用程序。
Chromium和Node本身就是广受欢迎的应用程序平台,它们都被独立用于创建雄心勃勃的应用程序。 Electron将两个平台结合在一起,允许您使用JavaScript构建一个全新的应用程序类。您可以在浏览器中执行任何操作优势: 1.如果你有nodeJS开发经验,和web开发经验,你可以很容易的上手electron
2.做客户端比做网页更值钱
[外链图片转存失败(img-EVCLw5az-1563415391350)(https://github.com/yuanxin42/qq/blob/master/img/QQ图片20190712094509.png)]
图解: electron由Node.js+Chromium+Native APIs构成。你可以理解成,它是一个得到了Node.js和基于不同平台的Native APIs加强的Chromium浏览器,可以用来开发跨平台的桌面级应用。
它的开发主要涉及到两个进程的协作——Main(主)进程和Renderer(渲染)进程。简单的理解两个进程的作用:
- 1.Main进程主要通过Node.js、Chromium和Native APIs来实现一些系统以及底层的操作,比如创建系统级别的菜单,操作剪贴板,创建APP的窗口等。同时,也可以在electron中使用node的api,是不是觉得很亲切,很舒服?
- 2.Renderer进程主要通过Chromium来实现APP的图形界面——就是平时我们熟悉的前端开发的部分,不过得到了electron给予的加强,一些Node的模块(比如fs)和一些在Main进程里能用的东西(比如Clipboard)也能在Render进程里使用。
electron通信的方式:
- 3.Main进程和Renderer进程通过ipcMain和ipcRenderer来进行通信。通过事件监听和事件派发来实现两个进程通信,从而实现Main或者Renderer进程里不能实现的某些功能。
- localstory
- ipcMain—ipcRenderer 基友通信
- webContents 渲染以及控制 web 页面,强行操作!
electron入门-简单传值
- node写接口
【#项目: electron仿客户端QQ简易版】简单传值代码地址
推荐阅读
- Vue项目导出|前端使用vue实现导出pdf
- javascript|vue实现HTML转PDF (已解决清晰、页边距、图片导出等问题)
- vue.js|20211025_Vue生命周期和钩子函数
- 数据库|基于node的登入例子(node-koa-mongoose)
- java|Web自动化神器,批量下载小姐姐美图,可直接导入使用
- 经验分享|电商项目——优惠券测试点有哪些()
- echarts|vue和echarts实现地图航线
- vue|vue: 解决错误 RunScriptError: post install error, please remove node_modules before retry!
- java|解决错误(Cannot find module ‘fs/promises‘)