摘要: 随着前端技术的飞速发展, 越来越多的技术领域开始被前端工程师踏足. 从 Node.JS 问世至今, 各种前端工具脚手架, 服务端框架层出不穷,"全栈工程师" 对于前端开发者来说, 再也不只是说说而已. 在 Node.JS 及其衍生技术高速发展的同时, Nw 和 Electron 的问世, 更是为前端发展提速不少, 依稀记得哪位前辈说过,"能用 Js 改写的, 终将用 Js 改写", 这不, 客户端来了! 使用 Electron 也有一段时间了, 各种简单复杂的问题, 也都或多或少的遇见过, 下决心整理出一套客户端模板出来, 一是加深一下自己的理解, 二是供小伙伴们参考指正. 本文选择 Electron6.x+webpack4+vue 全家桶为技术栈, 一套代码可以分别打包在客户端和 Web 端, 结合 webpack, 支持热更新, 打包为 exe 安装包, 过程中会涉及 vue 全家桶, electron 的常见问题, 配置和优化, webpack 的对应配置等. 从零开始, 把 electron,vue,webpack 统统纳入自己的知识体系! 项目完整代码: https://github.com/luohao8023/electron-vue-template
说明: 本着模拟从零开始的过程, 最开始的架构或者代码设计可能不是最优解, 有可能只适用于当前情况, 后续会一步步完善, 也可能会部分重构, 关键是体会这个从零到一, 再到完善的过程.
下面开始~~~
一, 新建工程
1, 说好的从零开始, 就从新建文件夹开始吧, 新建 electron-vue-template 文件夹.
2,cmd 进入文件夹, 执行 NPM init, 初始化一个 node 项目.
3, 完善工程目录结构:
项目根目录的结构大致就是上面这个样子, 后续完善过程中, 会在对应目录下增加相应的子目录, 后面会有讲到. 下面介绍一下各个目录的作用:
App:webpack 编译后的整个项目的代码, 包括主进程和渲染进程, 使用 electron-builder 打包 exe 安装包时, 会把这部分代码打进去;
builder:webpack 打包脚本, 包括打包主进程, 渲染进程, 打包各个环境的 exe 安装包, 启动各个环境的 devServer 等;
config: 配置文件, 包括环境配置, 版本等;
dist: 构建出的静态文件, exe,zip 等;
src: 源码目录;
main: 主进程源码;
renderer: 渲染进程源码;
4, 执行 NPM i electron -D, 下载 electron, 如果 7.0.0 版本安装不成功的话, 可尝试 cnpm i electron@6.1.2 -D 安装 6.1.2 版本, 我是尝试了好多次都无法下载 7.0.0 版本, 所以这里使用的是 6.1.2.
二, 窗口配置, 启动一个最简单的 electron 应用
1, 进入 src 下的 main 文件夹, 新建 index.html 和 main.JS 文件;
2,index.HTML 文件, 除了常规的结构之外, 随便写点简单的内容即可, 本文只在 body 标签内写入一下代码:
<h1>Welcome to electron-vue-template!</h1>
3,Electron 文档 https://electronjs.org/docs/tutorial/first-app 中说, 您应当在 main.JS 中创建窗口, 并处理程序中可能遇到的所有系统事件. 不过, 随着我们的应用逐渐复杂, 可能不止存在一个窗口, 在 main.JS 写入过多逻辑或者配置的话, 会使我们的项目越来越难维护, 所以正确的做法是, 对应的窗口有自己专门的 JS 文件, 负责这个窗口的配置和事件监听, 而 main.JS 文件只需要负责窗口的调度和系统级别的事件监听. 当然, 我们今天的目的是启动一个最简单的 electron 应用, 所以直接写在了 main.JS 文件里:
- const url = require('url');
- const path = require('path');
- const { App, BrowserWindow } = require('electron');
- function createWindow() {
- let win = new BrowserWindow({
- width: 800,
- height: 600
- });
- // 获取 index.HTML 的 file 协议路径
- const indexPath = url.pathToFileURL(path.join(__dirname, 'index.html')).href;
- // 如果路径或者参数中含有中文, 需要对路径进行编码处理
- win.loadURL(encodeURI(indexPath));
- // 打开开发者工具
- win.webContents.openDevTools();
- // 监听窗口的关闭事件, 释放窗口对象
- win.on('closed', () => {
- win = null;
- });
- }
- // 创建窗口
- App.on('ready', createWindow);
- // 当全部窗口关闭时退出.
- App.on('window-all-closed', () => {
- // 在 macOS 上, 除非用户用 Cmd + Q 确定地退出,
- // 否则绝大部分应用及其菜单栏会保持激活.
- if (process.platform !== 'darwin') App.quit();
- });
- App.on('activate', () => {
- // 在 macOS 上, 当单击 dock 图标并且没有其他窗口打开时,
- // 通常在应用程序中重新创建一个窗口.
- if (!win) createWindow();
- });
Electron apps 使用 JavaScript 开发, 其工作原理和方法与 Node.JS 开发相同. Electron 模块包含了 Electron 提供的所有 API 和功能, 引入方法和普通 Node.JS 模块一样: Electron 模块所提供的功能都是通过命名空间暴露出来的. 比如说: Electron.App 负责管理 Electron 应用程序的生命周期, Electron.BrowserWindow 类负责创建窗口.
4, 启动应用
废了这么多话, 应用到底该怎么启动? 那还不简单, 在 package.JSON 的 script 标签里新增一个 start 命令, 命令内容为 node ./src/main/main.JS, 然后运行 NPM start, 程序不就执行了嘛! 于是马上添加了 start 命令, 启动的时候命令行就报错了. WTF?? 什么鬼! 看了报错信息, 定位到了是在 App.on('ready') 这一行, 这也能报错??
试着打印了一下 App,undefined!! 于是又加了两行代码:
- const electron = require('electron');
- console.log(electron)
打印了一下 electron, 竟然是个这玩意儿: E:\lh\demo\electron-vue-template\node_modules\_electron@6.1.2@electron\dist\electron.exe, 不应该是个对象吗?
又翻了翻文档, 恍然大悟, Electron 并不属于 node 应用, 通过 node 来执行入口文件当然是不行的, 要用 electron 来执行, 正确的命令为: electron ./src/main/main.JS, 再次运行 NPM start, 看着命令行输出的内容以及刚刚启动的窗口, 舒服的长出了一口气.
第一篇的内容就写到这里了, 很少系统的去总结, 总感觉有些内容写不出来, 暂且做个引子吧, 如果希望后续的文章对某部分详细讲解的话, 欢迎留言, 同时, 如果有不恰当的地方, 也欢迎批评指正!
来源: https://www.cnblogs.com/kakayang/p/11753948.html