web应用及微信小程序版本更新检测方案实践

这篇具有很好参考价值的文章主要介绍了web应用及微信小程序版本更新检测方案实践。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景:

  随着项目体量越来越大,用户群体越来越多,用户的声音也越来越明显;关于应用发版之后用户无感知,导致用户用的是仍然还是老版本功能,除非用户手动刷新,否则体验不到最新的功能;这样的体验非常不好,于是我们团队针对该问题给出了相应的解决方案来处理;

技术栈:vue3+ts+vite+ant-design-vue

1、web应用版本检测方案:

        1.1、基于vite开发自定义插件version-update,vite打包流程运行version-update插件在项目结构目录public文件夹下生成version.json文件,通过读取version.json文件内容与服务器上的资源文件作为版本更新的比对依据

 1 /** src/plugin/versionUpdate.ts  **/
 2 import fs from 'fs'
 3 import path from 'path'
 4 interface OptionVersion {
 5   version: number | string
 6 }
 7 interface configObj extends Object {
 8   publicDir: string
 9 }
10 
11 const writeVersion = (versionFileName: string, content: string | NodeJS.ArrayBufferView) => {
12   // 写入文件
13   fs.writeFile(versionFileName, content, (err) => {
14     if (err) throw err
15   })
16 }
17 
18 export default (options: OptionVersion) => {
19   let config: configObj = { publicDir: '' }
20   return {
21     name: 'version-update',
22     configResolved(resolvedConfig: configObj) {
23       // 存储最终解析的配置
24       config = resolvedConfig
25     },
26 
27     buildStart() {
28       // 生成版本信息文件路径
29       const file = config.publicDir + path.sep + 'version.json'
30       // 这里使用编译时间作为版本信息
31       const content = JSON.stringify({ version: options.version })
32       /** 判断目录是否存在 */
33       if (fs.existsSync(config.publicDir)) {
34         writeVersion(file, content)
35       } else {
36         /** 创建目录 */
37         fs.mkdir(config.publicDir, (err) => {
38           if (err) throw err
39           writeVersion(file, content)
40         })
41       }
42     }
43   }
44 }

  1.2、将该文件作为插件放入到vite的plugin中去执行,并在vite构建过程中声明一个全局变量process.env.VITE__APP_VERSION__(这里仅仅只是一个变量,只用来记录打包时间和服务器json内容对比),值为当前时间戳

  1 /** vite.config.ts  **/
  2 import { defineConfig } from 'vite'
  3 import vue from '@vitejs/plugin-vue'
  4 import vueJsx from '@vitejs/plugin-vue-jsx'
  5 import VueSetupExtend from 'vite-plugin-vue-setup-extend'
  6 import { visualizer } from 'rollup-plugin-visualizer'
  7 import viteCompression from 'vite-plugin-compression'
  8 import versionUpdatePlugin from './src/plugins/versionUpdate' //Rollup 的虚拟模块
  9 // vite.config.ts
 10 import type { ViteSentryPluginOptions } from 'vite-plugin-sentry'
 11 import viteSentry from 'vite-plugin-sentry'
 12 // @ts-ignore
 13 const path = require('path')
 14 
 15 const NODE_ENV = process.env.NODE_ENV
 16 const IS_PROD = NODE_ENV === 'production'
 17 const CurrentTimeVersion = new Date().getTime()
 18 /*
 19   Configure sentry plugin
 20 */
 21 const sentryConfig: ViteSentryPluginOptions = {
 22   url: 'https://sentry.jtexpress.com.cn',
 23   authToken: '85ceca5d01ba46b2b6e92238486250d04329713adf5b4ef68a8e094102a4b6e1',
 24   org: 'yl-application',
 25   project: 'post-station',
 26   release: process.env.npm_package_version,
 27   deploy: {
 28     env: 'production'
 29   },
 30   setCommits: {
 31     auto: true
 32   },
 33   sourceMaps: {
 34     include: ['./dist/static/js'],
 35     ignore: ['node_modules'],
 36     urlPrefix: '~/static/js'
 37   }
 38 }
 39 
 40 // https://vitejs.dev/config/
 41 export default defineConfig({
 42   define: {
 43     // 定义全局变量
 44     'process.env.VITE__APP_VERSION__': CurrentTimeVersion
 45   },
 46   plugins: [
 47     IS_PROD && versionUpdatePlugin({
 48       version: CurrentTimeVersion
 49     }),
 50     vueJsx(),
 51     vue(),
 52     VueSetupExtend(),
 53     visualizer(),
 54     // gzip压缩 生产环境生成 .gz 文件
 55     viteCompression({
 56       verbose: true,
 57       disable: false,
 58       threshold: 10240,
 59       algorithm: 'gzip',
 60       ext: '.gz'
 61     }),
 62     IS_PROD && viteSentry(sentryConfig)
 63   ],
 64   resolve: {
 65     alias: {
 66       // @ts-ignore
 67       '@': path.resolve(__dirname, 'src')
 68     }
 69   },
 70   css: {
 71     preprocessorOptions: {
 72       less: {
 73         modifyVars: {
 74           // antd 自定义主题 https://www.antdv.com/docs/vue/customize-theme-cn
 75           'primary-color': '#1890ff',
 76           'link-color': '#1890ff',
 77           'border-radius-base': '2px'
 78         },
 79         additionalData: '@import "@/assets/style/common.less";',
 80         javascriptEnabled: true
 81       }
 82     }
 83   },
 84   server: {
 85     host: '0.0.0.0',
 86     port: 8080,
 87     open: false,
 88     https: false,
 89     proxy: {}
 90   },
 91   build: {
 92     minify: 'terser',
 93     terserOptions: {
 94       compress: {
 95         /* 清除console */
 96         drop_console: true,
 97         /* 清除debugger */
 98         drop_debugger: true
 99       }
100     },
101     rollupOptions: {
102       output: {
103         chunkFileNames: 'static/js/[name]-[hash].js',
104         entryFileNames: 'static/js/[name]-[hash].js',
105         assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
106         manualChunks(id) {
107           //静态资源分拆打包
108           if (id.includes('node_modules')) {
109             return id.toString().split('node_modules/')[1].split('/')[0].toString()
110           }
111         }
112       }
113     },
114     sourcemap: IS_PROD
115   }
116 })

  1.3、封装全局方法,请求当前域名下的/version.json资源,将vite中定义的全局变量和当前域名下的json文件内容做对比,如果不一致,我们则认为发布了新版本

 1 /** src/utils/checkVersion.ts **/
 2 import { Modal } from 'ant-design-vue'
 3 export default function versionCheck() {
 4   const timestamp = new Date().getTime()
 5   //import.meta.env.MODE 获取的是开发还是生产版本的
 6   if (import.meta.env.MODE === 'development') return
 7 
 8   fetch(`/version.json?t=${timestamp}`)
 9     .then((res) => {
10       return res.json()
11     })
12     .then((response) => {
13       if (process.env.VITE__APP_VERSION__ !== response.version) {
14         Modal.confirm({
15           title: '发现新版本',
16           content: '检测到最新版本,刷新后立即使用...',
17           okText: '立即更新',
18           cancelText: '暂不更新',
19           onOk() {
20             window.location.reload()
21           }
22         })
23       }
24     })
25 }

        1.4 、在layout全局文件中,监听路由变化,去调版本检测的方法来决定是否弹出提醒(尊重用户的选择,是否更新页面由用户来决定)

1 /** src/layout/index.vue **/
2  watch(
3     () => router.currentRoute.value,
4     (newValue: any) => {
5       /** 判断是否有更高的版本 */
6       checkVersion()
7     },
8     { immediate: true }
9   )

 

2、微信小程序应用版本检测方案:

 流程图:

web应用及微信小程序版本更新检测方案实践

  技术栈:Taro-vue+ts+nut-ui (京东物流风格轻量移动端组件库)

   2.1、基于微信开发文档提供的getUpdateManager版本更新管理器api去实现版本更新的检测与新版本应用的下载,封装全局方法

 1 /** 检查小程序版本更新 */
 2 export function checkMiniProgramVersion() {
 3   if (Taro.canIUse('getUpdateManager')) {
 4     const updateManager = Taro.getUpdateManager();
 5     updateManager.onCheckForUpdate(function (res) {
 6       // 请求完新版本信息的回调
 7       if (res.hasUpdate) {
 8         Taro.showModal({
 9           title: '新版本更新提示',
10           content: '检测到新版本,是否下载新版本并重启小程序?',
11           success: function (res) {
12             if (res.confirm) {
13               downloadAndUpdate(updateManager);
14             }
15           },
16         });
17       }
18     });
19   } else {
20     Taro.showModal({
21       title: '新版本更新提示',
22       showCancel: false,
23       content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。',
24       success: function () {
25         Taro.exitMiniProgram();
26       },
27     });
28   }
29 }
30 
31 /** 新版本应用下载 */
32 export function downloadAndUpdate(updateManager) {
33   Taro.showLoading();
34   updateManager.onUpdateReady(function () {
35     Taro.hideLoading();
36     Taro.showModal({
37       title: '新版本更新提示',
38       content: '新版本已经准备好,是否重启应用?',
39       success: function (res) {
40         if (res.confirm) {
41           // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
42           updateManager.applyUpdate();
43         }
44       },
45     });
46   });
47 
48   updateManager.onUpdateFailed(function () {
49     Taro.showLoading();
50     Taro.showModal({
51       title: '新版本更新提示',
52       showCancel: false,
53       content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~',
54       success: function () {
55         // 退出应用
56         Taro.exitMiniProgram();
57       },
58     });
59   });
60 }

  2.2、在app.ts入口文件onLaunch的生命周期钩子函数中去调用方法检测版本

 1 // src/app.ts
 2 import { createApp } from 'vue';
 3 import Taro from '@tarojs/taro';
 4 import './app.scss';
 5 import store from './store';
 6 import installPlugin from '@/plugins/index';
 7 import { wxLogin, checkMiniProgramVersion } from '@/utils/common';
 8 
 9 const App = createApp({
10   onLaunch() {
11     /** 检测小程序版本 */
12     checkMiniProgramVersion();
13   },
14 });
15 
16 App.use(store);
17 installPlugin(App);
18 
19 export default App;

 坑点Tips:

  小程序更新方案中由于受限于小程序的更新机制,第一次发版无效,因为微信小程序服务器上的版本中不存在checkMiniProgramVersion方法,所以无法执行;更新提示弹窗需要在第二次发版时才生效;文章来源地址https://www.toymoban.com/news/detail-709840.html

到了这里,关于web应用及微信小程序版本更新检测方案实践的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序监测版本更新

    在index.js里面 不放到app.js里面是因为有登录页面,在登录页面显示更新不太友好  在小程序测试的时候需要 添加编译模式 才可以模拟版本更新,发布到正式版本自动生效   点了确定就会自动刷新页面  

    2024年02月11日
    浏览(45)
  • springboot+vue网站部署及微信小程序发布

    一.网站部署到windows 下载nginx nginx: download,下载windows版本,解压后运行start nginx 若没有nginx的运行进程,查看D:nginx-1.22.1logs中报错日志,显示80端口被占用,在 D:nginx-1.22.1conf中的nginx.conf文件中重新配置端口号为88或者关掉相应进程(nginx路径中尽量不包含中文),修改配置

    2024年02月09日
    浏览(47)
  • 微信小程序检查版本更新并重启

    最近开发小程序时候碰上了一个问题,当发布新版本小程序后,需要用户能赶紧用上最新的,避免出问题。查了一下官方文档,总结出几个情况如下: 微信运行时,会定期(24小时内)检查最近使用的小程序是否有更新 (黄花菜都凉了) 用户长时间未使用小程序时,会强制同步

    2024年02月10日
    浏览(48)
  • uni微信小程序强制用户更新版本

    强制更新的代码参考官方文档 uni.getUpdateManager() | uni-app官网 我这边的如下: 效果:

    2024年01月25日
    浏览(35)
  • Flex布局简介及微信小程序视图层View详解

    目录 一、Flex布局简介 什么是flex布局? flex属性 基本语法和常用属性 Flex 布局技巧 二、视图层View  View简介 微信小程序View视图层 WXML 数据绑定 列表渲染 条件渲染 模板 WXSS 样式导入 内联样式 选择器 全局样式与局部样式 WXS 示例 注意事项 页面渲染 数据处理 Flex 布局(又称

    2024年02月20日
    浏览(51)
  • uniapp及微信小程序封装全局网络请求,弹框和hint提示

    今天分享一下uniapp项目的网络请求如何封装,不知道大家开发微信小程序项目是用什么开发工具,我个人更喜欢用uniapp,无论是从项目扩展方向还是开发效率来说,uniapp都是首选。 1:创建一个项目工具库,http.js 在vite.config.js文件中配置跨域 这样,一个全局网络请求工具就完

    2024年02月06日
    浏览(43)
  • 微信小程序更新最新版本后之前打开的用户还是老版本的问题

    小程序从启动到最终被销毁,会经历很多不同的状态,小程序在不同状态下会有不同的表现。 从用户认知的角度看,广义的小程序启动可以分为两种情况,一种是冷启动,一种是热启动。 冷启动:如果用户首次打开,或小程序销毁后被用户再次打开,此时小程序需要重新加

    2024年02月06日
    浏览(50)
  • 微信小程序(十三)生命周期-更新应用提醒

    注释很详细,直接上代码 上一篇 新增内容: 1. onLaunch 用法 2. onShow 用法 3. onHide 用法 4.应用更新API的调用模板 源码: 效果演示: 模拟成功的情况 2.模拟失败的情况 下一篇

    2024年01月25日
    浏览(52)
  • 创建一个uni-app项目并运行再浏览器及微信小程序

    第一步: 打开HBuilder X 点击文件列表 新建 项目 第二步: 如图所示(根据项目所需要的进行选择) 第三步: 创建完成之后项目文件的(介绍以及作用) 第四步: 如何将uni-app项目运行到不同的浏览器,我在这里运行的是微信小程序 (1) 点击运行可以查看到项目的多种运行方式 (2

    2024年02月12日
    浏览(74)
  • Unity项目转微信小游戏 微信小程序保姆教程,繁杂问题解决,及微信小游戏平台简单性能测试

    借着某人需求,做了一波简单的技术调研:将Unity项目转换为微信小游戏。 本文主要内容:Unity转换小游戏的步骤,遇到问题的解决方法,以及简单的性能测试对比 微信小游戏的限制 微信小游戏对程序包体大小有严格限制:首包必须小于2M,首包加分包(后加载)不得大于

    2024年02月05日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包