使用示例

本文档展示如何使用 fxyuni-update-check 的三种默认弹窗主题和自定义弹窗功能。

快速开始 - 全局插件方式（推荐）

1. 在 main.js 注册插件

// Vue 3 项目 (uni-app Vue 3 版本)
import { createSSRApp } from 'vue'
import App from './App.vue'
import { UpdateCheckPlugin } from 'fxyuni-update-check'

const app = createSSRApp(App)

// 注册 UpdateCheckPlugin 插件
app.use(UpdateCheckPlugin)

export function createApp() {
  return {
    app
  }
}

// Vue 2 项目 (uni-app Vue 2 版本)
import Vue from 'vue'
import App from './App.vue'
import { UpdateCheckPlugin } from 'fxyuni-update-check'

// 注册 UpdateCheckPlugin 插件
Vue.use(UpdateCheckPlugin)

new Vue({
  el: '#app',
  render: h => h(App)
})

2. 在任何地方直接调用（无需引入组件）

// 方式一：使用 this.$updateCheck （Vue 实例内）
export default {
  methods: {
    async checkUpdate() {
      const confirmed = await this.$updateCheck.showDialog({
        theme: 'red',
        title: '发现新版本',
        version: '1.0.1',
        changelog: ['修复登录问题', '优化性能', '新增功能'],
        buttonText: '立即升级',
        force: false,
        meta: {
          type: 'wgt',
          androidUrl: 'https://your.domain.com/app.wgt/apk',
          iosAppStoreUrl: 'https://apps.apple.com/cn/app/your-app/id1234567890'
        },
        onProgress: (progress) => {
          console.log(`下载进度: ${progress}%`)
        }
      })
      if (confirmed) {
        console.log('用户确认更新')
      } else {
        console.log('用户取消更新')
      }
    }
  }
}

// 方式二：使用 uni.$updateCheck （全局）
uni.$updateCheck.showDialog({
  theme: 'purple',
  title: '发现新版本',
  version: '1.0.1',
  changelog: ['修复登录问题', '优化性能'],
  buttonText: '立即升级'
})

// 方式三：直接导入 dialogManager
import { dialogManager } from 'fxyuni-update-check'

dialogManager.showDialog({
  theme: 'blue',
  title: '发现新版本',
  version: '1.0.1',
  changelog: '修复若干已知问题，提升稳定性'
})

微信小程序使用方法

在微信小程序中，由于平台限制无法动态挂载组件，需要通过模板方式直接引入组件：

1. 在页面中引入并使用组件

<template>
  <view class="page">
    <!-- 其他页面内容 -->
    
    <!-- 直接使用 UpdateDialog 组件 -->
    <update-dialog
      :visible="dialogVisible"
      :theme="dialogTheme"
      :title="dialogTitle"
      :version="dialogVersion"
      :changelog="dialogChangelog"
      :button-text="dialogButtonText"
      :force="dialogForce"
      :meta="updateMeta"
      @confirm="handleConfirm"
      @close="handleClose"
    />
  </view>
</template>

<script>
import UpdateDialog from 'fxyuni-update-check/src/dialog.vue'

export default {
  components: {
    UpdateDialog
  },
  data() {
    return {
      dialogVisible: false,
      dialogTheme: 'red',
      dialogTitle: '发现新版本',
      dialogVersion: '1.0.0',
      dialogChangelog: [],
      dialogButtonText: '立即升级',
      dialogForce: false,
      updateMeta: null
    }
  },
  onShow() {
    // 页面显示时检查更新
    this.checkForUpdate()
  },
  methods: {
    checkForUpdate() {
      // 微信小程序使用官方更新机制
      // 如果需要自定义弹窗，可以调用后端接口获取更新信息
          const updateManager = wx.getUpdateManager();
          updateManager.onCheckForUpdate(function (res) {
            console.log('onCheckForUpdate', res.hasUpdate);
          });
          updateManager.onUpdateReady(() => {
            this.showUpdateDialog({
              theme: 'red',
              title: '发现新版本',
              version: '1.0.0',
              note: '修复若干已知问题，提升稳定性',
              updateManager: updateManager
            })
          });
    },
    showUpdateDialog(meta) {
      this.dialogTheme = meta.theme || 'red'
      this.dialogTitle = meta.title || '发现新版本'
      this.dialogVersion = meta.version
      this.dialogChangelog = this.formatChangelog(meta.note)
      this.dialogForce = meta.force || false
      this.updateMeta = meta
      this.dialogVisible = true
    },
    formatChangelog(note) {
      if (!note) return ['修复若干已知问题，提升稳定性']
      if (typeof note === 'string') {
        return note.split('\n').filter(item => item.trim())
      }
      return Array.isArray(note) ? note : [note]
    },
    handleConfirm() {
      this.dialogVisible = false
      // 执行更新逻辑
      if (this.updateMeta) {
        // 调用组件内部的更新方法
        console.log('执行更新操作')
      }
    },
    handleClose() {
      if (!this.dialogForce) {
        this.dialogVisible = false
      }
    }
  }
}
</script>

2. 使用微信小程序原生更新机制

// 对于微信小程序，也可以使用官方的更新机制
import { checkUpdateWeapp } from 'fxyuni-update-check/src/weapp'

export default {
  onShow() {
    // 使用微信小程序原生更新机制
    checkUpdateWeapp()
  }
}

基础使用（旧方式，继续支持）

1. 使用红色主题弹窗

import { checkUpdate } from 'fxyuni-update-check'

checkUpdate({
  url: 'https://your.domain.com/update.json',
  theme: 'red',
  title: '发现新版本',
  onProgress: (progress) => {
    console.log(`下载进度: ${progress}%`)
  }
})

2. 使用紫色主题弹窗

import { checkUpdate } from 'fxyuni-update-check'

checkUpdate({
  url: 'https://your.domain.com/update.json',
  theme: 'purple',
  title: '发现新版本'
})

3. 使用蓝色主题弹窗

import { checkUpdate } from 'fxyuni-update-check'

checkUpdate({
  url: 'https://your.domain.com/update.json',
  theme: 'blue',
  title: '发现新版本'
})

4. 使用默认弹窗

import { checkUpdate } from 'fxyuni-update-check'

checkUpdate({
  url: 'https://your.domain.com/update.json',
  theme: 'default', // 或省略此参数
  title: '发现新版本',
  content: '是否立即更新？'
})

使用自定义弹窗组件

如果你想使用更完整的 UI 组件（支持完整的样式和动画），可以在你的页面中引入 dialog.vue 组件：

在 App.vue 中使用

<template>
  <view>
    <!-- 你的应用内容 -->
    <update-dialog
      :visible="dialogVisible"
      :theme="dialogTheme"
      :title="dialogTitle"
      :version="dialogVersion"
      :changelog="dialogChangelog"
      :button-text="dialogButtonText"
      :force="dialogForce"
      @confirm="handleConfirm"
      @close="handleClose"
    />
  </view>
</template>

<script>
import UpdateDialog from 'fxyuni-update-check/src/dialog.vue'
import { checkUpdate } from 'fxyuni-update-check'

export default {
  components: {
    UpdateDialog
  },
  data() {
    return {
      dialogVisible: false,
      dialogTheme: 'red',
      dialogTitle: '发现新版本',
      dialogVersion: '1.0.0',
      dialogChangelog: [],
      dialogButtonText: '立即升级',
      dialogForce: false,
      updateMeta: null
    }
  },
  onLaunch() {
    this.checkForUpdate()
  },
  methods: {
    async checkForUpdate() {
      await checkUpdate({
        url: 'https://your.domain.com/update.json',
        theme: 'custom',
        confirmBeforeUpdate: async (meta) => {
          // 使用自定义组件显示弹窗
          this.dialogTheme = 'red' // 或 'purple' | 'blue'
          this.dialogTitle = '发现新版本'
          this.dialogVersion = meta.version
          
          // 处理更新日志
          if (meta.note) {
            this.dialogChangelog = typeof meta.note === 'string'
              ? meta.note.split('\n').filter(item => item.trim())
              : (Array.isArray(meta.note) ? meta.note : [])
          } else {
            this.dialogChangelog = ['修复若干已知问题，提升稳定性']
          }
          
          this.dialogForce = meta.force || false
          this.updateMeta = meta
          this.dialogVisible = true
          
          // 返回 true 表示已接管弹窗
          return true
        },
        onProgress: (progress) => {
          console.log(`下载进度: ${progress}%`)
          // 可以在这里更新 UI 显示下载进度
        }
      })
    },
    handleConfirm() {
      this.dialogVisible = false
      // 执行更新逻辑（库会自动处理）
      // 如果需要手动触发，可以调用 checkUpdateApp 并传入 updateMeta
    },
    handleClose() {
      if (!this.dialogForce) {
        this.dialogVisible = false
      }
    }
  }
}
</script>

在页面中使用

<template>
  <view class="page">
    <button @tap="checkUpdate">检查更新</button>
    
    <update-dialog
      :visible="showDialog"
      theme="purple"
      :title="updateTitle"
      :version="updateVersion"
      :changelog="updateChangelog"
      :force="isForceUpdate"
      @confirm="onUpdateConfirm"
      @close="onDialogClose"
    />
  </view>
</template>

<script>
import UpdateDialog from 'fxyuni-update-check/src/dialog.vue'
import { checkUpdateApp } from 'fxyuni-update-check'

export default {
  components: {
    UpdateDialog
  },
  data() {
    return {
      showDialog: false,
      updateTitle: '发现新版本',
      updateVersion: '1.0.0',
      updateChangelog: [],
      isForceUpdate: false,
      updateOptions: null
    }
  },
  methods: {
    async checkUpdate() {
      await checkUpdateApp({
        url: 'https://your.domain.com/update.json',
        theme: 'custom',
        confirmBeforeUpdate: async (meta) => {
          this.updateVersion = meta.version
          this.updateChangelog = meta.note 
            ? meta.note.split('\n').filter(item => item.trim())
            : ['修复若干已知问题']
          this.isForceUpdate = meta.force || false
          this.updateOptions = { meta }
          this.showDialog = true
          return true
        },
        onProgress: (progress) => {
          uni.showToast({
            title: `下载中 ${progress}%`,
            icon: 'none'
          })
        }
      })
    },
    onUpdateConfirm() {
      this.showDialog = false
      // 更新逻辑由库自动处理
    },
    onDialogClose() {
      if (!this.isForceUpdate) {
        this.showDialog = false
      }
    }
  }
}
</script>

服务端 update.json 示例

{
  "version": "1.0.2",
  "note": "1、修复登录问题\n2、优化性能\n3、新增功能",
  "type": "wgt",
  "androidUrl": "https://your.domain.com/pkg/app_1.0.2.wgt/apk",
  "iosAppStoreUrl": "https://apps.apple.com/cn/app/your-app/id1234567890",
  "force": false
}

注意：

• note 字段可以是字符串（用 \n 分隔）或数组
• type 字段可以是 'wgt' 或 'apk'
• 当使用 'red'、'purple' 或 'blue' 主题时，note 会自动解析为更新日志列表
• force: true 时会隐藏关闭按钮，强制用户更新

主题对比

| 主题 | 特点 | 适用场景 | | --- | --- | --- | | red | 红色渐变，醒目 | 重要更新、紧急修复 | | purple | 紫色，优雅 | 常规更新、功能优化 | | blue | 蓝色渐变，科技感 | 新功能发布、版本升级 | | default | 系统默认弹窗 | 简单场景、快速集成 | | custom | 完全自定义 | 需要特殊 UI 的场景 |