#项目: electron仿客户端QQ简易版

简单讲解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进程里使用。

• 3.Main进程和Renderer进程通过ipcMain和ipcRenderer来进行通信。通过事件监听和事件派发来实现两个进程通信，从而实现Main或者Renderer进程里不能实现的某些功能。

electron通信的方式：

• localstory

• ipcMain—ipcRenderer 基友通信

• webContents 渲染以及控制 web 页面，强行操作！

• node写接口

electron入门-简单传值

简单传值代码地址