electron双端项目相关知识

2,984 阅读3分钟

electron核心

electron核心我们可以分成2个部分,主进程和渲染进程

  • 主进程
  • 渲染进程

主进程连接着操作系统和渲染进程,可以把它看做页面和计算机沟通的桥梁。 渲染进程就是我们所熟悉前端环境了。只是载体改变了,从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的。

而electron相当于node环境,我们可以在项目里使用所有的node api 。

桌面项目和 web项目

桌面项目

桌面项目 = 主进程 + 渲染进程

也就是electron桌面项目相对于是web项目 + node环境的壳,也就是完整的electron项目,我们一般说的electron项目其实也就是指桌面项目, 在这里,我们可以使用node api 和electron的所有技术

web项目

web项目 = 渲染进程

所以web项目不能够包含node api和electron核心的通信机制等

如何知道项目运行在 桌面环境 还是 web环境

如何知道项目运行在桌面环境(electron环境)还是web环境(浏览器环境)

渲染进程中使用 process.env.IS_WEB判断

process.env.IS_WEB 是暴露的一个全局变量,我们可以在渲染进程中获取,项目在electron环境下,返回false。否则为true;请记住,只有在渲染进程才能获取process.env.IS_WEB,主进程是无法获取的(undefined)

于此,我们可以通过设置它的值来达到web dev的效果,

例1 :在main.js主进程中配置已根据不同环境加载不同文件或处理不同逻辑

/**------------------------------
        electron环境(桌面环境)
 --------------------------------*/
if (!process.env.IS_WEB) {
    Vue.use(require('vue-electron'))
}

/**------------------------------
             web环境
 --------------------------------*/
if (process.env.IS_WEB) {
    
}

例2:在页面中根据不同运行环境进行不同显示

例3:根据不同环境来进行文件处理

  • web端使用input file API
  • electron桌面端使用 electron 的ipc和node 的fs处理模块

参考:web端用js读取文件路径上传的实现方法

项目迁移到web端

如果要迁移项目到web端,就需要把项目中的electron提供的API和node的API完全剥离出来,只能遗留web的代码,比如 node fs模块,electron提供ipc 模块,都需要剥离。

web端一律不能使用 node fs模块,electron提供ipc

如果你一开始就打算双端程序,在开始写代码时应该对web代码和elecctron的代码进行分离,以便后期的迁移。

1.项目运行处理

  1. 进入渲染进程的main.js,对运行环境进行处理

当运行环境是桌面端时,动态引入ipc 和 fs

  1. 进入store文件夹的index.js 把用到electron ipc的相关代码都注释

这里的createPersistedState, createSharedMutations两个插件是electron提供的

  • createPersistedState ——[数据持久化插件]
  • createSharedMutations——[在标签/窗口之间共享Vuex mutations插件]

注释这两个插件

  1. 进入项目依赖配置文件package.json中添加web端运行脚本

  1. 进入dev-runner.js开发运行配置(.electron-vue\dev-runner.js)

其中DEV_TARGET值是package.json里通过npm run web脚本传递过来的参数取到的

  1. 重启项目,运行命令 npm run web运行web端的

其他需要注意的是:如果项目无法正常运行在浏览器端,请确认项目中的关于node api使用的地方和electron ipc使用的地方是否都注释掉或者进行判断处理了

2.项目打包处理

根据全局变量process.env.NODE_ENV来判断。

  • 生产环境:process.env.NODE_ENV !== 'production'
  • 开发环境:process.env.NODE_ENV !== 'development'
  1. 配置url服务器地址接口url

在渲染进程main.js中配置 建议看一下这篇文章 webpack-merge

参考