update-sdk 接入说明文档

欢迎使用我们的 SDK！本文档将指导你如何接入和使用我们的 SDK，以便在你的应用程序中集成相关功能。

目录

1. 项目地址
2. SDK 概述
3. 环境要求
4. 安装和配置
5. 使用 SDK 功能

项目地址

http://gerrityq.cloudglab.cn/#/admin/projects/All-Projects

SDK 概述

我们的 SDK 提供了一套功能丰富的工具和接口，帮助你轻松地集成特定功能到你的应用程序中。通过使用我们的 SDK，你可以加速开发过程并快速实现所需的功能。

以下是我们 SDK 的主要特点：

• 功能一：支持客户端增量更新。
• 功能二：支持打增量包和配置文件。

环境要求

在开始接入 SDK 之前，请确保你的开发环境满足以下要求：

• 基本要求一：当前您已经处于electron项目中。
• 基本要求二：您有一个位置可以存放文件包并且可以通过浏览器访问下载。
• 基本要求三：如果您存在资源包，您的资源包（chrome及chrome驱动）需要位于libs目录下。

安装和配置

1.安装sdk：在你的项目中安装 update-sdk。

运行以下命令进行安装：

npm install update-sdk

或者，如果你使用的是 yarn 包管理器，可以运行以下命令：

yarn add  update-sdk

使用 SDK 功能

我们的 SDK 提供了一系列功能和接口，让你能够轻松集成和使用特定功能。以下是一些常见的功能使用示例：

支持客户端增量更新

createUpdater()

描述

createUpdater构造器提供了一系列方法用户支持客户端增量更新

参数

• architecture架构 ia32 | x64（需要和传入打增量包函数中的一致）。
• update_base_url：增量更新文件地址。

返回值

该方法返回一个增量更新实例

升级方案

版本号依赖于package.json中的version

| 更新 | 当前线上版本 | 场景 | 升级版本 | | --- | --- | --- | --- | | A | 1.1.1 | 整包升级 | 2.1.1 | B | 1.1.1 | 除libs外的升级整包升级 | 1.2.1 | C | 1.1.1 | 升级某个文件或文件夹时例如，需要迭代更改config.json、dist、dist-electron等 | 1.1.2

服务器文件目录

├─ app-mac-update.yml ├─ app-mac.zip ├─ app-win32-x64.yml ├─ app-win32-x64.zip ├─ app-win32-ia32.yml ├─ app-win32-ia32.zip ├─ 云战止付通_x.x.x.exe └─ lastest.yml #记录是否需要更新exe包

注意：为保证只进行增量更新或全量更新

在增量更新时，不要更新lastest.yml的版本

在全量更新时，将app压缩包相关的所有文件删除

示例

// 在入口文件，例如electron/main/index.ts中

// 引入sdk
import { createUpdater } from 'updater-sdk'

// 注册增量更新实例
const updater = createUpdater(config.architecture, config.update_base_url)


// 在监听客户端打开后，检测是否需要增量更新
win.webContents.on('did-finish-load', async () => {
  await updater.checkAndDownload(false)
})


// 检测到存在全量更新的包后，清理增量缓存文件
autoUpdater.on('update-available', () => {
  updater.clearTempCatalog()
})

// 拦截客户端关闭行为进行更新
app.on('before-quit', async (event) => {
  try {
    // 存在可更新包
    if (updater.needToUpdate()) {
     // 拦截默认关闭行为
      event.preventDefault()
      // 如果需要的话，您可以在这里与渲染进程通信，做一些页面进度条
     // win?.webContents.send('app-Upgrade', '检测到新版本更新，正在安装')
     // 增量安装
      await updater.installApp()
      //win?.webContents.send('app-Upgraded')
    }
  }
  catch (error) {
    console.error('before-quit:', error)
  }
})

如果你存在手动检测的操作，您可以监听事件后

ipcMain.on('renderer-process-message', async (event, payload) => {
  if (message === 'update-check')
    updater.checkAndDownload(true)
})

如果你需要展示进度条,您可以在app.on('before-quit',()=>{}）中

win?.webContents.send('app-Upgrade', '检测到新版本更新，正在安装')
win?.webContents.send('app-Upgrade', '检测到新版本更新，正在安装')

同时在渲染进程中监听

ipcRenderer.on('app-Upgrade', (event, message) => {
  updateDialogRef.value.openDialog(message)
})
ipcRenderer.on('app-Upgraded', (event, message) => {
  updateDialogRef.value.closeDialog()
})

这里给出一个弹窗实例的示例，您也可以自定义：

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const title = ref()
const timer = ref()

const dialogVisible = ref(false)
const percentage = ref(0)

function openDialog(params: string) {
  title.value = params
  dialogVisible.value = true
}
function closeDialog() {
  percentage.value = 100
  timer.value && clearTimeout(timer.value)
  const closeTimer = setTimeout(() => {
    dialogVisible.value = false
    closeTimer && clearTimeout(closeTimer)
  }, 100)
}

onMounted(() => {
  timer.value = setTimeout(() => {
    runProgressBar()
  }, 1500)
})

function sleep(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function runProgressBar() {
  const totalProgressSteps = 100
  const fastDuration = 1 * 60 * 1000 // 快速阶段的持续时间（1分钟）
  const slowDuration = 3 * 60 * 1000 // 慢速阶段的持续时间（暂定3分钟慢速时间）

  percentage.value = 20 // 当前进度

  while (percentage.value < 100) {
    if (percentage.value < 50)
      percentage.value += 2

    else
      percentage.value += 1

    // console.log(`进度：${percentage.value}%`)

    let delay
    if (percentage.value <= 50)
      delay = Math.floor(fastDuration / (totalProgressSteps / 2))

    else
      delay = Math.floor(slowDuration / (totalProgressSteps / 2))

    await sleep(delay)
  }
}

defineExpose({
  openDialog,
  closeDialog,
})
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="title" align-center :close-on-click-modal="false" :show-close="false" :modal="false">
    <div class="upgrade-progress">
      <el-progress :percentage="percentage" :show-text="false" />
    </div>
    <el-text tag="b" class="bt-10px">
      请稍后，请勿强制关闭应用
    </el-text>
  </el-dialog>
</template>

<style scoped lang="scss">
.upgrade-progress .el-progress--line {
  margin-bottom: 30px;
}
</style>

注意事项

createUpdater实例的注册需要在监听ready事件之后，因为只有在这个之后才能取到app.getPath("userData")的值

支持打包增量包和配置文件

afterPack()

描述

该方法用支持打包增量包和配置文件

参数

• context：afterPack函数的默认参数。
• architecture：架构 ia32 | x64（需要和传入增量更新构造函数的一致）。
• version： 版本，这里期望和package.json保持一致
• array：需要压缩/更新的文件夹数组，例如 ['dist', 'dist-electron', 'node_modules_dep']

返回值

无

示例

# 使用示例代码展示如何调用该方法
const updater = require('updater-sdk')

exports.default = async function (context) {
  updater.afterPack(context, architecture, version, ['dist'])
}

注意事项

在调用该方法时，需要要求您在根目录下有一个afterPack.js文件，如果没有则新建

参数3的数组：注意'node_modules'传入的是'node_modules_dep'。

afterPack方法中做了什么？

1. 删除了打包后locales中一些不必要的语言包
2. 生成zip包
3. 生成yml文件

打包后的zip和yml文件的格式？

mac

app-darwin-x64.zip app-darwin-x64.yml

64位windows

app-win32-x64.zip app-win32-x64.zip

32位windows

app-win32-ia32.zip app-win32-ia32.yml