Windows桌面应用

当需要通过Window桌面程序访问私有化会众云平台时，可以使用以下流程将私有化会众云平台封装为独立的Window桌面应用

1.打包思路

核心思路：以 WebView内嵌 的方式，调用 私有化会众云平台 的访问地址，实现桌面应用直接访问会众云平台页面的预期效果

提示

为了避免私有云平台每次升级后，桌面应用的重新打包，所以基于 直接访问网页 ，而非基于 源码打包 。

注意：有关WebView的框架

本文基于 Electron 框架，使用内置的WebView来演示桌面应用程序的打包。

市面上有多个基于 WebView 的框架，本文选择 Electron 作为打包框架，是基于此框架目前生态相对较大，出现的问题易解决。

若读者有更好的想法，可以基于本文打包思路，寻求自己喜欢或者熟练的 WebView 框架执行打包。

2.环境准备

2.1 环境软件要求

为保证打包流程顺利，此处罗列流程中需要 提前安装 的软件

• NodeJs
  • 点击跳转到NodeJs官方下载地址
• Git
  • 点击跳转到Git官方下载地址

软件安装提示

以上软件除了根据自身情况 修改安装路径 以外，均可一路默认下一步直至安装完成。

NodeJs安装确认

可以在终端中输入 node --version 或 npm --version 并回车，来确认 NodeJs 是否安装成功（能够返回 版本号 即为成功安装）。

Git安装确认

可以在终端中输入 git --version 并回车，来确认 Git 是否安装成功（能够返回 版本号 即为成功安装）。

2.2 环境软件配置

为了良好的NodeJs使用体验，修改镜像源仓库为 https://registry.npmmirror.com

注意

若您的电脑 曾配置过 镜像加速地址，可跳过此步。

# 配置镜像仓库地址
npm config set registry=https://registry.npmmirror.com

# 检查仓库地址是否与上一步配置相同
npm conifg get registry

修改原因

默认的仓库地址访问以及下载速度都 较慢 ，此处给出一个镜像仓库，能 显著减少 下载所需时间。

3.新建并初始化项目

3.1 项目新建

新建一个文件夹并进入该文件夹

提示

此处新建文件夹名为 zerocode-demo ，后续流程也基于此文件夹来演示。

打开此路径下的 powershell / cmd 终端

进入终端的方式

推荐：直接在目标文件夹的路径栏输入 powershell 或 cmd 并回车，便可打开此路径下的终端窗口。

powershell / cmd

两种终端都可以，都是Windows支持的终端。

3.2 项目初始化

在终端中输入 npm init ，然后根据实际情况填写对应的参数

参数相关

这里也可以全部默认，后续都可以在新建项目中的 package.json 中更改。

终端中继续输入 npm install –-save-dev electron ，然后稍等片刻即可

兼容Win7

如果需要兼容Win7，那么应该设置Electron的版本为22，详情参阅：再见，Windows 7/8/8.1
推荐选择v22.3.27，这是22最后一个Stable版本

npm install –-save-dev electron@22.3.27

至此，项目初始化结束，文件结构应该如下

zerocode-demo
|-- node_modules/
|-- package.json
┕-- package-lock.json

• 关于文件结构
  • node_modules ：是存放依赖的地方，非必要 勿动
  • package.json ：本项目的配置文件，后续会 调整 此文件
  • package-lock.json ：执行 npm install xxx 时自动生成的文件，内容包含自动下载和管理的依赖包名和版本，非必要 勿动

4.项目配置与基础代码填充

4.1 基础代码填充

虽然 Electron 对入口文件的位置并没有特别要求，但这里为了方便管理源代码，仍然建议在 项目根目录 下新建 src 文件夹，并在其中创建入口文件 main.js

const { app, BrowserWindow } = require('electron')
// 保持一个对于Windows对象的全局引用，防止JavaScript被 GC 后，Window被自动关闭
var win = null;

const createWindow = () => {
    // 窗口创建，并设置初始宽高
    win = new BrowserWindow({
        width: 800,
        height: 900,
        // 防止窗口在启动事件结束之前启动，
        show: false,
    })

    // 让窗口最大化
    win.maximize();

    // 设置菜单栏隐藏
    win.setMenu(null);

    // 设置窗口直接需要加载的私有化会众云平台地址
    // 此处以会众云平台地址举例说明
    win.loadURL("https://apaas.0codepaas.com/");
}

// 当应用程序就绪后创建 窗体
app.whenReady().then(() => {
    createWindow()
})

// 当所有 窗体 被关闭后，整个App执行退出
app.on('window-all-closed', () => {
    console.log("exit app\n")
    if (process.platform !== 'darwin') app.quit()
})

4.2 项目配置

然后需要调整 package.json ，完成最后的配置需求，主要调整字段 main ，然后需要确保 name 、 version 、 description 、 author 这几项字段一定 有值 ，后续打包会 强制 要求这几项配置，否则会打包失败。

• 关于强制要求的字段
  • name ：项目名，后续打包时，会自动调用该名字作为打包后的可执行文件文件的名字
  • version ：自定义的的 版本 字段，可任意定义，此处使用默认值 1.0.0 ；后续若有分发打包的需求时，此项会参与最终 分发包 文件的 命名
  • description ：自定义的 描述 字段，可任意填写；后续若有分发打包的需求时，此项会参与最终 分发包 的 描述属性信息 填充
  • author ：自定义的 作者 字段，可任意填写；后续若有分发打包的需求时，此项会参与最终 分发包 的 版权属性信息 填充

此处演示中的 package.json 文件的最终内容如下：

{
  "name": "zerocode-demo",
  "version": "1.0.0",
  "description": "demo",
  "main": "./src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "会众云",
  "license": "ISC",
  "devDependencies": {
    "electron": "^33.0.2"
  }
}

4.3 自定义Logo图标

将提前准备好的Logo图片放置在项目根目录下。

注意

Windows 只支持 .ico 文件，不接受其他格式的图片。

打开文件 forge.config.js ，修改 packagerConfig 部分

// 其他代码
module.exports = {
  packagerConfig: {
    asar: true,
    // 追加内容
    icon: "./logo.ico",      // 指定客户端应用程序的Logo图标
    name: "会众云·零搭平台"   // 可选：覆盖 package.json 中的 name 值
  },
  // 其他代码
};

5.项目打包

5.1 打包工具链安装

electron-forge 安装

在终端中键入 npm install --save-dev @electron-forge/cli 并回车，完成工具安装

然后键入 npx electron-forge import 并回车，完成工具默认配置导入

完成这两步后，前置工作基本完毕，此时文件结构应该大致如下

zerocode-demo
|-- .git/
|-- node_modules/
|-- src/
|   ┕-- main.js
|-- forge.config.js
|-- package.json
┕-- package-lock.json

关于 forge.config.js

这是执行 npx electron-forge import 后，生成的文件，是后续打包需要配置文件，内部存有默认的打包规则，针对本演示，我们无需修改，使用 默认的打包配置 足以。若有其他配置需求，可以参阅：Electron-Forge的 Makers 说明文档 。

然后关于 package.json 文件也会被自动修改，添加了一些配置项，最终内容如下：

{
  "name": "zerocode-demo",
  "version": "1.0.0",
  "description": "demo",
  "main": "./src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "author": "会众云",
  "license": "ISC",
  "devDependencies": {
    "@electron-forge/cli": "^7.5.0",
    "@electron-forge/maker-deb": "^7.5.0",
    "@electron-forge/maker-rpm": "^7.5.0",
    "@electron-forge/maker-squirrel": "^7.5.0",
    "@electron-forge/maker-zip": "^7.5.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.5.0",
    "@electron-forge/plugin-fuses": "^7.5.0",
    "@electron/fuses": "^1.8.0",
    "electron": "^33.0.2"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.1"
  }
}

关于 package.json 被修改的部分

package.json 被修改了 script 、 devDependencies 和 dependencies，后两项无需在意，是自动导入的依赖项，这里主要关注 script 字段的内容。

5.2 打包 Window 应用并启动验证

在终端中输入 npm run package 并回车，便可启动打包流程

打包完成后，可以在目录下的 out 文件夹中找到对应的打包文件，进去找到 zerocode-demo.exe 双击并执行即可

默认打包路径规则

在 out 文件夹中可以看到形如 [name]-[platform]-[arch] 的文件夹，文件夹内则是形如 [name].exe 的可执行文件；

对应到本演示中，则是文件夹 zerocode-demo-win32-x64，以及进入此文件夹后，可以找到 zerocode-demo.exe 的可执行文件。

至此，打包流程结束，将整个 zerocode-demo-win32-x64 文件夹压缩 ZIP ，便可以发出去了

注意

以上内容仅作为 私有平台 ，内部使用，如果想要打包发布至 公共平台 ，还请参阅官方文档 发布与更新 添加必要的签名信息等内容。

分发包打包方式

此处仅为 简易Window应用 打包流程说明，若希望打包为 安装包Setup ，可以在此基础上参阅 分发包安装依赖：Electron Installer的ReadME文档 来执行安装包所需代码的补充与构建。

另外，此时会调用的则是 npm run make 而非 npm run package。

7.附录.参考文档

• 创建你的第一个Electron应用
• 打包你的应用程序
• Electron Forge-Makers 配置文档
• 分发包安装事件简易处理说明
• 分发包安装依赖：Electron Installer的ReadME文档