关于第一个项目中主进程与渲染进程各模块功能的理解

1.写在前面

环境基础：vscode(+常用插件)+git+node+npm+electron+vue(es6+js+vuecli)+websocket

-->安装32位electron：

1.先初始化：npm init

2.npm install electron --save-dev

3.或者npm install --arch=ia32 --platform=win32 electron

4.验证安装成功 npx electron -v

5.安装timer.js：npm install timer.js

-->git相关指令：上传、下拉、更新等(也可软件内可视化操作)

git add .

git commit

git push

-->node中重要目录：(child_process子进程 && events事件触发器 && global全局变量 && path路径 && URL && stream流)

-->vue重要语法：(router，Vuex，自定义组件)

-->ES6重要语法： 2,3,4,7,8,9,16,20,21,22,23,24

-->关于electron

-->http、tcp、websocket 看阮一峰文档、博客

2.关于第一个项目中主进程与渲染进程各模块功能的理解

来自网上一张图

render进程：

1.Main.js为项目入口，引入app.js组件，通过路由渲染根组件Layout和子组件home\index.vue

2.views为页面组件，components为零件组件

3.utils用来与主进程通信

a.封装向主进程发送消息的格式(invoke->handle)

b.global用来定义全局变量，渲染进程直接引用如：bus.on，client.on（其中client可以监听的方法都定义在client函数中），device.lia等等

4.tools用来处理websocket，当时项目由于数据卡顿影响性能，转到主进程中处理

5.styles存放全局样式

6.store存放状态变量

7.assets存放图标图片等

8.router

import Vue from 'vue'
import Router from 'vue-router'
// 引入路由表
import routerMap from './constantRouterMap'

Vue.use(Router)

export default new Router({
  scrollBehavior: () => ({ y: 0 }),// 借助vue-router提供的scrollBehavior来管理组件的滚动行为
  routes: [{
    path: '/',
    component: Layout,
    redirect: '/home', // 子组件默认的定向
    hidden: true,
    children: [{
      path: 'home',
      component: () => import('@/views/home/index')
    }]
  }]
})

main主进程：

1.主进程的入口文件，这里主要调用app方法，控制应用程序的生命周期

2.sevices用来处理与渲染进程进行通信的逻辑

a.IPCMain：主要用来处理通信函数，封装数据包的格式

b.windowManger：控制软件窗口的创建与参数配置等，需要单独将写在其他文件的函数都引用进来，如IPCMain文件

3.config -----一些配置，还没弄明白

a.menu.js：是定义原生菜单的地方，可以自定义菜单项以及他们的子项，子项还能实现添加点击事件，打开一个新窗口等操作

4.client！！！重要

a.在client.js中自定义一个原型client类继承EventEmitter，每3秒触发一次open函数，相当于3秒监听一次websocket以及它发生的事件，并用emit发送出去，有client.on来接收~

b.在index.js中监听各个事件（open、error、close、message），并打印对应的日志

c.bus总线，用来分发消息

d.device：处理跟设备相关的文件，接收数据并将数据交给bus来处理（主进程和渲染进程通用），并导出指令包（index.js）！

i._common_directive.js： 封装了向服务器发送数据的格式

ii.modules：定义数据下发的指令（lia.js）

e.events

<template>
  <Framer>
    <mainHead slot="header" v-if="winSize ==='small'"></mainHead>
    <renderHead slot="header" v-else></renderHead>
 </Framer>
</template>
<script>
import Framer from '@/components/frame/mainFrame.vue'
import mainHead from '@/components/header/mainHead.vue'
import renderHead from '@/components/header/RenderHead.vue'

export default {
  name: 'MainWindow',
  components: { Framer, mainHead, renderHead }
}
</script>

<template>
  <div>
    <!-- 具名插槽 -->
    <slot name="header"></slot>
    <div class="body-container">
      <slot>
        <!-- 子路由匹配到的子组件显示的地方 -->
        <router-view></router-view>
      </slot>
    </div>
  </div>

</template>

详见

3.积累文档

css

某个模块div元素整体缩放功能：transform：scale(1.5)可以缩放属性元素所在标签，当前设置放大1.5倍。