5分钟写一个electron应用（七）|七日打卡

已注销
790 阅读6分钟

微信公众号：[猫十二的日常]，欢迎留言和指出问题a

electron开发比较灵活，在开发，编译，打包，和electron应用程序的方法中，没有一个被称为是唯一标准的方法。有关electron的编译运行时相关的额外功能，我们都可以通过npm的独立安装包中找到，这样开发者可以根据自己的需求编译应用和构建流水线

  • 模板，一个模板就像是一张空白的画布，你可以以它为基础来搭建你的应用。 通常来说，你可以从一个代码仓库克隆一个模板，然后修改成你心仪的样子。
  • 命令行工具，则是在整个开发和分发过程中从另一方面给你提供帮助。 他们更有用，但同时也对代码结构和构建项目有着硬性的要求。 特别是对于初学者来说，命令行工具十分有用

现在我们讲几个主流的模板工具

electron-forge

ps:这网站打开有点费劲

Electron Forge 是一个用来构建现代化Electron应用的完善的工具。 Electron Forge将多个现有的（ 且有稳定维护的 ）Electron构建工具整合为一个简单易用的工具包，所有人都可以用它来快速地搭建Electron开发环境。对于Forge的一些核心模块都是来自于electron的维护者开发的，所以这更像亲儿子，现在我们来看看文档创建一个简单的项目吧

命令行安装

npx create-electron-app my-app

image-20210116104526516

npm安装好像很慢，但是它生成了目录结构，这样我们可以用淘宝镜像来装

npm config set registry http://registry.npm.taobao.org

#我们可以用一个包 随意切换镜像源
npm install -g nrm 
nrm use taobao // 切换镜像源
nrm ls //查看其它镜像源

但是 好像依旧很慢，我们开始直接进到目录里面去操作吧，反正生成了目录

image-20210116110105284

cnpm i 
npm start
// 依旧报错
An unhandled rejection has occurred inside Forge:
Error: Could not find any Electron packages in devDependencies
    at getElectronModuleName (/Users/liuyang/aymfx/gitRepository/electron-examples/2020-01-16/node_modules/_@electron-forge_core@6.0.0-beta.54@@electron-forge/core/src/util/electron-version.ts:56:11)
    at getElectronVersion (/Users/liuyang/aymfx/gitRepository/electron-examples/2020-01-16/node_modules/_@electron-forge_core@6.0.0-beta.54@@electron-forge/core/src/util/electron-version.ts:92:23)
    at _default (/Users/liuyang/aymfx/gitRepository/electron-examples/2020-01-16/node_modules/_@electron-forge_core@6.0.0-beta.54@@electron-forge/core/src/api/start.ts:46:11)
    at /Users/liuyang/aymfx/gitRepository/electron-examples/2020-01-16/node_modules/_@electron-forge_cli@6.0.0-beta.54@@electron-forge/cli/src/electron-forge-start.ts:58:19

Electron Forge was terminated. Location

看了下说没装electron，简单给他加上就是了，一定要加在devDependencies

cnpm i -D electron
npm start

跑起来的效果

image-20210116111108179

我们来看看 package.json的命令

  "scripts": {
    "start": "electron-forge start", // 开发模式
    "package": "electron-forge package", // 好像是打包，但是这个过程超级慢
    "make": "electron-forge make", //如果您运行生成脚本，Electron Forge将为您生成特定于平台的可分发内容，以便您与所有人共享
    "publish": "electron-forge publish", //发布
    "lint": "echo \"No linting configured\""
  },

总结：文档打开慢，初始化挺慢，打包也挺慢。好像国内很少用这个，我们来看看下个吧

electron-builder

Electron Builder 是一个完备的Electron应用打包和分发解决方案，它致力于软件开发的集成体验。 electron-builder 出于简化的目的添加了一个依赖项，可以在内部管理所有更多的要求。

electron-builder 会将Electron维护者使用的模块和功能(例如: auto-updater) 替换为自定义的. Electron Builder打包的应用内组件的集成度会更高，同时与主流的Electron应用共同点也就更少了,以下是官方给出的几点优势

  • npm包的管理（支持yarn 不需要强制区分生产依赖和开发依赖）
  • 可以进行签名操作
  • 自动更行
  • 支持很多目标格式
  • 发布平台的优势
  • 可以基于docker打包electron，生成不同平台的应用
  • 自动按需下载所有必需的工具文件（例如，以代码签名Windows应用程序，制作AppX），而无需进行设置

安装基于webpack启动的应用

命令行 先搞起来

mkidr 2020-01-16 //创建目录2020-01-16 win 不支持 可以用win下面的git界面敲
cd 2020-01-16
npm init -y
mkdir src
cd src
mkdir main
mkdir renderer
touch main/index.js
touch renderer/index.js
cd ..
cnpm i electron-builder electron  electron-webpack  webpack -D

最终目录结构

image-20210116135613086

main/index.js

"use strict";

import { app, BrowserWindow } from "electron";
import * as path from "path";
import { format as formatUrl } from "url";

const isDevelopment = process.env.NODE_ENV !== "production";

// global reference to mainWindow (necessary to prevent window from being garbage collected)
let mainWindow;

function createMainWindow() {
  const window = new BrowserWindow({
    webPreferences: { nodeIntegration: true },
  });

  if (isDevelopment) {
    window.webContents.openDevTools();
  }

  if (isDevelopment) {
    window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
  } else {
    window.loadURL(
      formatUrl({
        pathname: path.join(__dirname, "index.html"),
        protocol: "file",
        slashes: true,
      })
    );
  }

  window.on("closed", () => {
    mainWindow = null;
  });

  window.webContents.on("devtools-opened", () => {
    window.focus();
    setImmediate(() => {
      window.focus();
    });
  });

  return window;
}

// quit application when all windows are closed
app.on("window-all-closed", () => {
  // on macOS it is common for applications to stay open until the user explicitly quits
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  // on macOS it is common to re-create a window even after all windows have been closed
  if (mainWindow === null) {
    mainWindow = createMainWindow();
  }
});

// create main BrowserWindow when electron is ready
app.on("ready", () => {
  mainWindow = createMainWindow();
});

renderer/index.js

"use strict";
const styles = document.createElement("style");
styles.innerText = `@import url(https://unpkg.com/spectre.css/dist/spectre.min.css);.empty{display:flex;flex-direction:column;justify-content:center;height:100vh;position:relative}.footer{bottom:0;font-size:13px;left:50%;opacity:.9;position:absolute;transform:translateX(-50%);width:100%}`;
const vueScript = document.createElement("script");
vueScript.setAttribute("type", "text/javascript"),
  vueScript.setAttribute("src", "https://unpkg.com/vue"),
  (vueScript.onload = init),
  document.head.appendChild(vueScript),
  document.head.appendChild(styles);
function init() {
  (Vue.config.devtools = false),
    (Vue.config.productionTip = false),
    new Vue({
      data: {
        versions: {
          electron: process.versions.electron,
          electronWebpack: require("electron-webpack/package.json").version,
        },
      },
      methods: {
        open(b) {
          require("electron").shell.openExternal(b);
        },
      },
      template: `<div><div class=empty><p class="empty-title h5">Welcome to your new project!<p class=empty-subtitle>Get qwdqwd now and take advantage of the great documentation at hand.<div class=empty-action><button @click="open('https://webpack.electron.build')"class="btn btn-primary">Documentation</button> <button @click="open('https://electron.atom.io/docs/')"class="btn btn-primary">Electron</button><br><ul class=breadcrumb><li class=breadcrumb-item>electron-webpack v{{ versions.electronWebpack }}</li><li class=breadcrumb-item>electron v{{ versions.electron }}</li></ul></div><p class=footer>This intitial landing page can be easily removed from <code>src/renderer/index.js</code>.</p></div></div>`,
    }).$mount("#app");
}

package.json

{
  "name": "2020-01-16",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": {
    "dev": "electron-webpack dev",
    "compile": "electron-webpack",
    "dist": "npm run compile && electron-builder",
    "dist:dir": "npm run dist --dir -c.compression=store -c.mac.identity=null"
  },
  "dependencies": {
    "source-map-support": "^0.5.16"
  },
  "devDependencies": {
    "electron": "8.2.0",
    "electron-builder": "^22.4.1",
    "electron-webpack": "^2.8.2",
    "webpack": "~4.42.1"
  }
}

结果

image-20210116135949892

这是参照这个别人的一个快速搭建的项目来的，用的人也不是很多，这个项目告诉我们，我们再搭建electron项目的时候，其他的技术也是可以用到的，比如webpack、vue等等，在网页开发的，一样可以开发桌面的应用，记得跑这个项目的时候要把版本对应到，我现在webpack的版本都是5了，试了下最新的是跑不起来的。

vue搭建electron项目

其实vue cli 已经支持搭建electron项目 而且非常的迅速自然，那么我们开始吧

首先我们需要安装vue cli ,出现版本号就是安装成功了

cnpm install -g @vue/cli
vue -V
//@vue/cli 4.5.8

启动vue可视化界面，你会看到一个项目仪表盘，选择Vue项目管理器，创建一个新的vue项目，然后按照指示创建一个vue项目

vue ui

image-20210116140830408

image-20210116141032798

创建完成后 我们直接按图中的先运行一遍，跑起来后点击右边的启动app

image-20210116141256081

image-20210116141335429

现在创建一个vue项目简直太简单了，内置了很多包方便我们使用，现在我们将这个网页放置在electron中，这次我们需要装一个插件，这个插件可以帮我们把项目变成一个electron壳子的vue项目，来试试吧

不贴图，摸索下应该很快就能找到了

插件-添加插件-然后搜索插件 vue-cli-plugin-electron-builder -点击安装 -等待-最后安装成功

image-20210116141839472

回到任务-我们会看到多了几个图标

image-20210116141940169

点击electron:serve - 运行

image-20210116142101289

完成

我们可以看看目录结构 多了一个 background.js ，这就是主进程了

image-20210116142158582

通过vue cli，像我这样熟练工可能五分钟不到就可以创建一个基于electron的vue项目，我们就可以玩转桌面的应用了。其实你们可以试试打包的操作，肯定小有成就，我也能写桌面应用了，曾经只能从事c++的人才能写的东西，我们js也能搞事情了,继续加油。

如果觉得我的文章还可以，点个赞或者关注一下下，还有精彩的故事等着你哦，还可以云撸猫

avatar
文章
阅读
粉丝