# remote-control

**Repository Path**: li_shifeng/remote-control

## Basic Information

- **Project Name**: remote-control
- **Description**: 极客时间 - Electron 开发实战
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://www.yuque.com/li_shifeng/glew8t/dnms1v
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-25
- **Last Updated**: 2021-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 搭建步骤

- `npm init -y` # 初始项目
- `git init` # 初始 git
- `npm i -D electron` # 安装 electron
- `create-react-app main` # 进入 app/renderer/src 目录创建一个 react 项目（注：需全局安装 create-react-app）
- 配置渲染进程 package.json `{"start": "set BROWSER=none && react-scripts start"}` 启动应用时不打开浏览器
- `npm i -D concurrently wait-on` # concurrently: 用来并行多个命令的执行；wait-on: 等待资源准备好了才会触发后面的命令
- `cd app/renderer/src/main` # 进入渲染进程项目目录 `npm i -D customize-cra react-app-rewired` # 安装这两个模块，让你在不退出 cra eject 的情况下可以对内部做一些改动
- `npm i -S robotjs` # 安装 robotjs (注：需要先安装 Python 和 Visual Studio)
  - [安装 Python](https://www.python.org/downloads/windows) (注：需要勾上 Python Launcher 一块安装)
  - [安装 Visual Studio](https://visualstudio.microsoft.com/zh-hans/free-developer-offers) (注：需要勾选 “使用 C++ 的桌面开发” 一块安装)
- `npm i -S vkey` # 作用：通过 keyCode 获取具体的按键
- `npm i -S ws`
- `npm i -S about-window`
- `npm i -D electron-builder electron-builder-squirrel-windows cross-env`

# 目录结构

- 见 /directoryList.md 文件

# 启动项目

- `npm i` # 安装依赖
- `cd app/renderer/src/main` # 进入渲染进程项目目录
- `npm i` # 安装依赖
- `cd ../../../../` # 返回根目录
- `cd signal` # 进入 WebSocket 服务目录
- `npm i` # 安装依赖
- `cd ../` # 返回根目录
- `npm run start` # 启动项目

# 项目打包

## 打包工具对比

|              |                 electron-builder                 |                    electron-forge                    |
| :----------: | :----------------------------------------------: | :--------------------------------------------------: |
|     签名     |                       √√√                        |                         √√√                          |
|  安装包类型  |                       √√√                        |                         √√√                          |
| 原生模块编译 |                       √√√                        |                         √√√                          |
|    定制化    |                       √√√                        |                          √                           |
|   上手成本   |                        √√                        |                          √                           |
| boilerplate  |                        ×                         |                         √√√                          |
|  跨平台构建  |                  Linux、Windows                  |                          ×                           |
|  社区活跃度  |                       √√√                        |                          √√                          |
|     场景     | 打包和发布的完整解决方案<br />基本适用于所有场景 | 创建到发布的一体化解决方案<br />适合从 0 到 1 的项目 |

## 打包证书

- Mac: 开发者证书
- Windows: 去 “赛门铁克” 或 “WoSign” 上购买证书

## 打包配置

```
"build": {
  "appId": "com.geektime.mercurius", // 应用 id
  "productName": "Mercurius", // 应用名称
  "files": "app",
  "asar": false, // 是否使用 asar 加密
  "extraFiles": [
    "app/renderer/**/src"
  ],
  "directories": { // 目录配置
    "app": "dist", // 打包的代码目录
    "buildResources": "resource", // 构建包的资源目录
    "output": "release" // 存放产包的目录
  },
  "copyright": "Copyright © 2020 dragon", // 版权信息
  "mac": {
    "target": [ // 包的格式
      "dmg",
      "zip"
    ],
    "icon": "resources/icon.icns" // logo 地址
  },
  "dmg": { // dmg 配置
    "background": "resources/background.png", // 背景图
    "window": { // 安装窗口大小
      "width": 540,
      "height": 380
    },
    "contents": [ // dmg 内容坐标
      {
        "x": 410,
        "y": 180,
        "type": "link",
        "path": "/Applications"
      },
      {
        "x": 130,
        "y": 180,
        "type": "file"
      }
    ],
    "iconSize": 128 // logo 大小
  },
  "win": {
    "icon": "resources/icon.ico", // logo 地址
    "target": [ // 包格式
      "squirrel",
      "nsis"
    ]
  },
  "nsis": { // nsis 配置
    "oneClick": false, // 一键安装
    "language": "2052", // 安装语言代码
    "perMachine": true, // 给机器上所有用户安装
    "allowToChangeInstallationDirectory": true // 让用户选择安装目录
  },
  "squirrelWindows": { // squirrel 配置
    "loadingGif": "resources/loading.gif", // 安装 loading 动画
    "iconUrl": "https://raw.githubusercontent.com/dengyaolong/geektime-electron/master/img/icon.ico" // icon 的远端地址
  }
}
```

## 打包

- `npm run pack:win` # 打 windows 包
- `npm run pack:mac` # 打 mac 包

# 软件更新

| 更新方式 |                     手动更新                     |                文件覆盖                |         自动更新         | 操作系统                   |
| :------: | :----------------------------------------------: | :------------------------------------: | :----------------------: | -------------------------- |
|   优点   |                     简单稳定                     |               下载过程快               |     稳定、快、打扰少     | 统一、稳定                 |
|   缺点   |         过程繁琐、慢、影响使用、更新率低         | 慢、实现比较复杂、稳定性差、写文件失败 |         实现复杂         | 受应用商店局限             |
| 适用场景 | 低频更新、用户粘性高、作为各种升级技术的降级方案 |                 打补丁                 | 高频更新软件、体验要求高 | 操作系统应用商店上架的软件 |

# 经验 & 技巧

- 产品发布可使用 npm version patch/minor/major 管理升级版本号
- windows 下需要证书签名，否则可能被杀毒软件误杀
- mac 下如果没有证书签名，无法使用 electron 自动更新

# 注

- navigator.mediaDevices.getUserMedia() 需在 “file://协议” 或 “https://协议” 或 “http://localhost” 或 “http://127.0.0.1” 下使用，否则获取不到媒体流
- getUserMedia() 未指定视频流的源时，默认调用摄像头获取视频流，此时电脑需要有硬件摄像头
- 程序启动前要先把 signal 文件夹里的 socket 服务启动起来
- postbuild 钩子会在 build 执行完成之后执行

# 附

- `npm i -g mddir` # 全局安装 mddir 用于生成目录结构（使用：当前目录执行 mddir）
- `npm i -g create-react-app` # 全局安装 create-react-app 用于创建 react 项目
- `npm list -g` # 查看全局安装的 npm 包
- `npm list -g --depth 1` # --depth 用于列出依赖包的层级（1 表示列出依赖包及依赖包的下一级）
- `iconutil -c icns icons.iconset -o icon.icns` # 通过 iconutil 生成 icns