更新记录

0.0.1（2026-02-17） 下载此版本

• 功能需要真机才能使用，此插件为APP升级弹窗 安卓在线升级

平台兼容性

uni-app(4.0)

uni-app x(4.0)

app-upgrade

app升级提示中心组件，客户端检查更新。无需云函数，通过CSS和HTML自定义样式。

使用方法

1. 在pages.json中添加upgrade-version页面

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    // 添加upgrade-version页面
        {
            "path": "pages/upgrade-version/index",
            "style": {
                "navigationBarTitleText": "",
                "navigationStyle": "custom",
                "app-plus": {
                    "bounce": "none",
                    "animationType": "none",
                    "background": "transparent"
                }
            }
        }
    ],
  ...
}

在pages/upgrade-version/index.vue中添加如下代码:

<template>
  <view class="upg-version">
    <windyeasy-app-upg ref="upgradeRef" @installFinished="goBack" @cancel="goBack" :gradient="gradient" />
  </view>
</template>

<script>
export default {
  mounted() {
    this.$refs.upgradeRef.openShow(this.versionInfo)
  },
  data() {
    return {
      gradient: {
        start: "#ffbb99",
        end: "#ff5704"
      },
      versionInfo: null // 版本信息
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1,
      })
    }
  },
  onLoad(options) {
    if (options.obj) {
      this.versionInfo = JSON.parse(options.obj)
    }
  }
}
</script>

<style>
page {
  background: rgb(0 0 0 / 50%);
  /**  设置窗口背景半透明 */
}
</style>

在app.vue调用checkVersion方法

<script>
import {checkVersion} from "@/uni_modules/windyeasy-app-upg"
export default {
  onLaunch: function () {
    // 调用更新函数
    // #ifdef APP-PLUS
    // 可以在这里通过接口获取版本信息，进行map后放入版本信息
    checkVersion({
      version: "1.0.1",
      // app端下载地址
      apkUrl: "http://192.168.1.18:9000/api/static/1771244310635-H524D1E12__20260214155435.apk", 
      content: "提升性能增加兼容性",
      upgType: 1, // 0. 不升级 1.可选升级 2.强制升级
    })

    /*
     * 注意如果使用的页面路径不是“/pages/upgrade-version/index”可传入第二参数
     * checkVersion(.., "/pages/custom/index") 
     */

        // #endif
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
}
</script>

checkVersion支持在其它页面调用，如果有关于页面可以在关于页面弹出升级提示，可以通过按钮弹出或自动弹出

支持传入其它过渡背景色：

<template>
  <view class="upg-version">
    <windyeasy-app-upg ref="upgradeRef" @installFinished="goBack" @cancel="goBack" :gradient="gradient" />
  </view>
</template>

<script>

export default {
  mounted() {
    this.$refs.upgradeRef.openShow(this.versionInfo)
  },
  data() {
    return {
      gradient: {
        // 不同的过渡背景色
        start: "#b3d9ff",
        end: "#409eff"
      },
      versionInfo: null // 版本信息
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1,
      })
    }
  },
  onLoad(options) {
    if (options.obj) {
      this.versionInfo = JSON.parse(options.obj)
    }
  }
}
</script>

<style>
page {
  background: rgb(0 0 0 / 50%);
  /**  设置窗口背景半透明 */
}
</style>

在有源码的情况下支持自定义升级样式，跳转到升级页面可通过h5进行样式调试：

<template>
    <view class="content">
        <button @click="goUpgPage">去升级页面</button>
    </view>
</template>

<script>
    export default {
        methods: {
            goUpgPage(){
        // 跳转到升级页面后可以自定义样式，有源码情况下
                uni.navigateTo({
                    url: "/pages/upgrade-version/index"
                })
            }
        }
    }
</script>