Electron开发 —— 简单整合框架
2020-09-16 本文已影响0人
潇潇剑_易水阁
总得有个纸上谈兵
序：
- 此篇仅为构造这个基本框架的步骤，会省去很多可能将来会出问题的但啰嗦的地方
- 仅以此篇与之前demo做强烈的对比，更省心就是出个标题没下文的系列，→_→
- demo均在易水GIT
- 下面的方案，忽略了且模糊了，你该不该在渲染进程直接调起主进程的东西，虽然该东西也仅是个代理，10.X版本以上处理了remote以及渲染进程拿到的electron 对象，各位也仅仅修改下直接调起统一改为发布事件那种，当然改动幅度还是很大，至于后期需不需要跟进，以及需不需要像demo那样新打开本地窗口重新构建vue实例的样子，取决于你怎么看待使用vue这种去构建electron应用
- 不是使用vue（或其他框架）就必需要这样做，切忌头脑发热，没自己思考就一梭子CV
- 以及当你看完之后，很多没有的或者很多可以简化的地方，别问为啥，demo的用意，get it？
前置：
- node 12.18.3
- npm 6.14.8
- electron 9.2.1（10.X以上版本请不要使用该方案）
- vue 2.6.11
- vue CLI 4.2.3
- element-ui 2.13.2（非必要）
一：步骤：
1. 使用 vue CLI 创建vue项目，并去掉所有暂不需要的东西，完成后的结构如下：
electron-vue-frame
└─ node_modules
├─ public
│ └─ index.html
├─ src
│ ├─ assets
│ ├─ components
│ ├─ router
│ │ └─ index.js
│ ├─ store
│ │ └─ index.js
│ ├─ views
│ ├─ App.vue
│ └─ main.js
├─ .prettierrc
├─ package.json
└─ vue.config.js
2. 创建electron 环境，参考之前的demo，和之前demo的不同在于此处增加了node服务器启动，electron加载服务地址获取index.html，完成后的结构如下：
electron-vue-frame
└─ node_modules
├─ public
│ ├─ container.js（新增）
│ ├─ server.js（新增）
│ └─ index.html（改动）
├─ src
│ ├─ assets
│ ├─ components
│ ├─ router
│ │ └─ index.js
│ ├─ store
│ │ └─ index.js
│ ├─ views
│ ├─ App.vue（改动）
│ └─ main.js
├─ .prettierrc
├─ package.json（改动）
└─ vue.config.js（改动）
3. 划分好对应的职责范围，比如UI模块选择element-ui 或其他
3.1.0 新增桌面原生组件调用
3.1.1 主要是结合vuex去做的一个主进程和渲染进程之间的事件发布订阅的操作，当然这款还是很绕，本意仅为当你需要原生的桌面相关的东西时，可以直接： 某某对象=》你得所作所为，并不需要太了解底层是怎么去弄的，比如究竟是调用主进程还是渲染进程，业务方真的不需要知道这些，这也是为啥整合进来的原因，当然总得有个要去知道这种流程的人，封装好现有或者将来有的东西，或许将来框架也不在这样，这种套娃封装就可以去掉了
3.1.2 完成后的结构如下：
electron-vue-frame
└─ node_modules
├─ public
│ ├─ container.js
│ ├─ server.js
│ └─ index.html
├─ src
│ ├─ assets
│ ├─ components
│ ├─ desktop_components（新增）
│ │ └─ dialogs（新增）
│ │ └─ base.js（新增）
│ ├─ router
│ │ └─ index.js
│ ├─ store
│ │ └─ index.js（改动）
│ ├─ views
│ ├─ App.vue
│ └─ main.js
├─ .prettierrc
├─ package.json
└─ vue.config.js
3.2. 修改路由调用
3.2.1 其实这个有没有必要，做惯了web还是想着干嘛不就是单页面里面跳转，为啥要窗口，单页面也能模拟窗口，毕竟原理一致，但是当我总这样想的时候，是因为我做这一行太久了，久到眼中只有自己的应用，故要是你也有此疑惑或者不知道为啥需要整合到此的，不需要再看下去了，因为当前你的环境没碰到这些，即使碰到也不一定会想着用这个，要是不嫌弃写得简陋就看下去吧，其实只是想方便下，因为整体是在vue单页面进行，至于多开窗口，业务能规避的就规避，不能的其实也好管理吧，多个实例，路由还是那一套，故此处结合vue的路由router，但是原生桌面的菜单还是需要那一套，主进程发送事件到渲染进程，此处也会整合到一个地方，方便后续使用者直接按template调用即可（此处方法很多，包括改不改新起一个窗口还是路由next渲染成功后，改变原来的窗口的大小，还是利用 BrowserView等等去拷贝内容作为新窗口的填充也仅仅是各位的真实应用时的考虑）
3.2.2 完成后的结构如下：
electron-vue-frame
└─ node_modules
├─ public
│ ├─ container.js
│ ├─ server.js
│ └─ index.html
├─ src
│ ├─ assets
│ ├─ components
│ ├─ desktop_components
│ │ └─ dialogs
│ │ └─ base.js
│ ├─ router
│ │ └─ index.js（改动）
│ ├─ store
│ │ └─ index.js
│ ├─ views
│ │ └─ Login.vue（新增）
│ ├─ App.vue
│ └─ main.js
├─ .prettierrc
├─ package.json
└─ vue.config.js
总体结构思维导图如下：
框架简图
二：未来：
1. 简化调用，比如封装的本地弹框，应该简化为
dialog.info(msg)
