1. 為什么版本號(hào)管理是跨端開發(fā)的第一道坎做跨端開發(fā)尤其是用uni-app這種“一套代碼發(fā)布到多個(gè)平臺(tái)”的框架開發(fā)者很容易陷入一種錯(cuò)覺代碼邏輯是統(tǒng)一的那么獲取一些基礎(chǔ)信息比如應(yīng)用版本號(hào)也應(yīng)該是統(tǒng)一的。但現(xiàn)實(shí)往往第一個(gè)巴掌就扇在這里。我接手過不少?gòu)钠渌_發(fā)者那里轉(zhuǎn)過來(lái)的uni-app項(xiàng)目經(jīng)?？吹皆贏pp.vue的onLaunch里試圖用一個(gè)uni.getSystemInfo就拿到所有端的版本號(hào)結(jié)果在H5和小程序上要么報(bào)錯(cuò)要么拿到的是瀏覽器或微信的版本根本不是自己應(yīng)用的版本。這看似是個(gè)小問題卻直接關(guān)系到應(yīng)用的核心邏輯。版本號(hào)用來(lái)做什么用戶端它展示在“關(guān)于我們”頁(yè)面是基礎(chǔ)信息開發(fā)端它是灰度發(fā)布、強(qiáng)制更新、AB測(cè)試、數(shù)據(jù)統(tǒng)計(jì)、問題回溯的基石。想象一個(gè)場(chǎng)景你發(fā)布了一個(gè)新版本App修復(fù)了某個(gè)緊急Bug同時(shí)在H5和小程序也更新了功能。如果沒有準(zhǔn)確獲取各端自身版本號(hào)的能力你的更新提示邏輯就會(huì)亂套——可能App提示更新了H5卻毫無(wú)反應(yīng)或者反過來(lái)。用戶在不同端看到的信息不一致體驗(yàn)會(huì)非常割裂。所以搞清楚如何在uni-app中分別獲取原生App編譯為apk/ipa、H5部署在服務(wù)器、微信小程序這三個(gè)主要終端的應(yīng)用版本號(hào)是跨端項(xiàng)目穩(wěn)健起步的必修課。這不是一個(gè)API能搞定的它需要你理解每個(gè)平臺(tái)的運(yùn)行機(jī)制和配置文件的差異。下面我就結(jié)合實(shí)際的踩坑經(jīng)驗(yàn)把這三個(gè)平臺(tái)的版本號(hào)獲取方法、背后的原理以及那些官方文檔沒細(xì)說的“坑點(diǎn)”給你徹底講明白。2. App端深入manifest.json與原生編譯產(chǎn)物在uni-app項(xiàng)目中App端的版本號(hào)管理核心在于兩個(gè)文件manifest.json和原生平臺(tái)的特定配置文件。很多新手以為版本號(hào)只在打包時(shí)設(shè)置其實(shí)它在運(yùn)行時(shí)的獲取邏輯也值得深究。2.1 版本號(hào)的定義與優(yōu)先級(jí)首先打開你項(xiàng)目根目錄下的manifest.json文件。在app-plus節(jié)點(diǎn)下如果是Vue3項(xiàng)目也可能是app節(jié)點(diǎn)你會(huì)找到版本相關(guān)的配置app-plus: { versionName: 1.2.0, versionCode: 120, // ... 其他配置 }這里有兩個(gè)關(guān)鍵字段versionName(版本名稱)展示給用戶看的字符串如“1.2.0”、“2.1.5-beta”。它遵循主版本號(hào).次版本號(hào).修訂號(hào)的常見約定。versionCode(版本代碼)一個(gè)整數(shù)用于內(nèi)部比較版本新舊。每次發(fā)布新版本這個(gè)數(shù)字必須遞增。Google Play 和國(guó)內(nèi)安卓市場(chǎng)主要依據(jù)這個(gè)值來(lái)判斷是否升級(jí)。注意versionName和versionCode在manifest.json中配置的是基準(zhǔn)值。當(dāng)你使用HBuilderX進(jìn)行云打包或離線打包時(shí)最終生成的原生安裝包APK/IPA的版本信息以打包時(shí)傳入的參數(shù)或可視化界面中的設(shè)置為準(zhǔn)。manifest.json中的值更像是默認(rèn)值或模板。這是一個(gè)常見的混淆點(diǎn)。2.2 運(yùn)行時(shí)獲取plus.runtime.getProperty在App運(yùn)行后我們需要在JavaScript代碼中動(dòng)態(tài)獲取這些信息。這需要調(diào)用HTML5即5 Runtime的API。uni-app對(duì)這部分API進(jìn)行了封裝可以通過uni.getSystemInfo獲取一些但獲取應(yīng)用自身版本號(hào)必須使用plus.runtime.getProperty。下面是一個(gè)在App.vue的onLaunch中安全獲取版本信息的示例// 在 App.vue 中 export default { onLaunch: function() { // 判斷平臺(tái)僅App端執(zhí)行 // #ifdef APP-PLUS const app this; // 等待plus環(huán)境ready這是一個(gè)關(guān)鍵細(xì)節(jié) document.addEventListener(plusready, function() { const platform uni.getSystemInfoSync().platform; // 再次確認(rèn)是App環(huán)境雖然已經(jīng)在#ifdef里 if (platform android || platform ios) { plus.runtime.getProperty(plus.runtime.appid, function(inf) { console.log(App版本名稱:, inf.version); // 對(duì)應(yīng) versionName console.log(App版本代碼:, inf.versionCode); // 對(duì)應(yīng) versionCodeiOS上可能為undefined console.log(App標(biāo)識(shí):, inf.appid); // 將信息存入Vuex或全局變量供其他頁(yè)面使用 app.$store.commit(setAppVersionInfo, { versionName: inf.version, versionCode: inf.versionCode || 0, // iOS處理 appid: inf.appid }); // 示例檢查更新邏輯 app.checkAppUpdate(inf.version, inf.versionCode); }); } }); // #endif }, methods: { checkAppUpdate(currentVersionName, currentVersionCode) { // 這里實(shí)現(xiàn)你的檢查更新邏輯比如請(qǐng)求服務(wù)器接口 uni.request({ url: https://your-api.com/check-update, data: { platform: uni.getSystemInfoSync().platform, version: currentVersionName, versionCode: currentVersionCode }, success: (res) { if (res.data.hasUpdate) { // 提示用戶更新 uni.showModal({ title: 發(fā)現(xiàn)新版本, content: 新版本 ${res.data.newVersion} 已發(fā)布是否立即更新, success: (modalRes) { if (modalRes.confirm) { // Android通常直接下載apk安裝iOS跳轉(zhuǎn)App Store plus.runtime.openURL(res.data.downloadUrl); } } }); } } }); } } }關(guān)鍵點(diǎn)與避坑指南環(huán)境判斷務(wù)必使用// #ifdef APP-PLUS條件編譯將代碼包裹因?yàn)閜lus對(duì)象只在App環(huán)境存在在H5或小程序環(huán)境直接調(diào)用會(huì)報(bào)錯(cuò)“plus is not defined”。等待plusreadyApp啟動(dòng)后5 Runtime環(huán)境需要一點(diǎn)時(shí)間初始化。在onLaunch中直接調(diào)用plus.runtime.getProperty可能失敗。最穩(wěn)妥的方式是監(jiān)聽document的plusready事件或者使用setTimeout進(jìn)行簡(jiǎn)短延遲不推薦不優(yōu)雅。iOS的versionCode在iOS平臺(tái)plus.runtime.getProperty回調(diào)的inf對(duì)象中versionCode字段通常是undefined。因?yàn)閕OS的CFBundleVersion構(gòu)建版本號(hào)在WebView層不一定暴露。如果你需要iOS的構(gòu)建號(hào)可能需要通過uni-app原生插件來(lái)獲取或者依賴versionName對(duì)應(yīng)CFBundleShortVersionString進(jìn)行版本比較。熱更新與版本號(hào)如果你使用了uni-app的wgt熱更新請(qǐng)注意熱更新包的版本號(hào)也需要在manifest.json中配置并且熱更新不會(huì)改變?cè)惭b包的versionCode。你的檢查更新邏輯需要同時(shí)考慮整包更新和熱更新兩套規(guī)則。3. H5端從package.json到構(gòu)建環(huán)境的變量注入H5端的版本號(hào)獲取邏輯與App端截然不同。H5項(xiàng)目運(yùn)行在瀏覽器中沒有“安裝包”的概念它的版本本質(zhì)上就是你當(dāng)前部署在服務(wù)器上的前端資源包的版本。3.1 版本信息的來(lái)源與管理最普遍的做法是將版本號(hào)定義在package.json文件中與你的npm包管理保持一致// 項(xiàng)目根目錄/package.json { name: my-uni-app, version: 1.2.0, // ... 其他依賴和腳本 }但是package.json里的版本號(hào)是在Node.js環(huán)境中讀取的瀏覽器中的JavaScript無(wú)法直接訪問這個(gè)文件。因此我們需要在構(gòu)建build過程中將這個(gè)版本號(hào)“注入”到前端代碼可以訪問的地方。3.2 構(gòu)建時(shí)注入以Vue CLI模式為例如果你使用HBuilderX創(chuàng)建的項(xiàng)目它內(nèi)部使用了webpack進(jìn)行構(gòu)建。我們需要通過配置將版本號(hào)作為一個(gè)全局變量或環(huán)境變量暴露出來(lái)。方法一使用DefinePlugin注入全局常量在項(xiàng)目根目錄創(chuàng)建或修改vue.config.js文件如果不存在則創(chuàng)建// vue.config.js const packageJson require(./package.json); module.exports { // ... 其他配置 chainWebpack: (config) { // 向所有編譯環(huán)節(jié)注入全局常量 config.plugin(define).tap((definitions) { definitions[0][process.env].VERSION JSON.stringify(packageJson.version); definitions[0][process.env].APP_NAME JSON.stringify(packageJson.name); return definitions; }); }, // 或者使用更直接的configureWebpack configureWebpack: { plugins: [ new (require(webpack).DefinePlugin)({ process.env.VERSION: JSON.stringify(packageJson.version), process.env.BUILD_TIME: JSON.stringify(new Date().toISOString().slice(0, 19).replace(T, )) }) ] } };方法二通過自定義公共文件注入創(chuàng)建一個(gè)專門用于存放版本信息的JavaScript模塊文件在構(gòu)建時(shí)由Node腳本生成。創(chuàng)建腳本scripts/inject-version.js:// scripts/inject-version.js const fs require(fs); const packageJson require(../package.json); const content // 此文件由構(gòu)建腳本自動(dòng)生成請(qǐng)勿手動(dòng)修改 export const APP_VERSION ${packageJson.version}; export const APP_NAME ${packageJson.name}; export const BUILD_TIMESTAMP ${Date.now()}; ; fs.writeFileSync(./src/utils/version.js, content); console.log(版本信息已注入到 src/utils/version.js);在package.json的scripts中增加命令scripts: { inject-version: node scripts/inject-version.js, build:h5: npm run inject-version uni-build --platform h5 }在代碼中引用// 在任何.vue或.js文件中 import { APP_VERSION, APP_NAME } from /utils/version.js; export default { data() { return { appVersion: APP_VERSION, appName: APP_NAME }; }, onLoad() { console.log(H5應(yīng)用版本, this.appVersion); uni.setStorageSync(h5_version, this.appVersion); } };3.3 運(yùn)行時(shí)獲取與緩存策略對(duì)于H5版本號(hào)在每次構(gòu)建部署后就固定了。一個(gè)高級(jí)技巧是結(jié)合本地存儲(chǔ)和請(qǐng)求頭來(lái)管理版本以處理緩存和強(qiáng)制刷新。// utils/version-helper.js import { APP_VERSION } from ./version.js; class VersionHelper { constructor() { this.currentVersion APP_VERSION; } // 檢查是否需要刷新例如檢測(cè)到新版本后清理緩存并重載 checkAndReload() { const storedVersion uni.getStorageSync(app_version); if (storedVersion storedVersion ! this.currentVersion) { // 版本不一致執(zhí)行清理操作 console.log(檢測(cè)到版本變更 (${storedVersion} - ${this.currentVersion})清理緩存...); // 可以清理特定的localStorage或IndexedDB數(shù)據(jù) // uni.clearStorage(); // 謹(jǐn)慎使用會(huì)清空所有 uni.setStorageSync(app_version, this.currentVersion); // 提示用戶或自動(dòng)刷新謹(jǐn)慎使用自動(dòng)刷新可能影響體驗(yàn) uni.showToast({ title: 應(yīng)用已更新, icon: success }); // setTimeout(() { location.reload(true); }, 1500); // 強(qiáng)制從服務(wù)器重新加載 } else if (!storedVersion) { // 首次訪問存儲(chǔ)版本號(hào) uni.setStorageSync(app_version, this.currentVersion); } } // 在發(fā)起網(wǎng)絡(luò)請(qǐng)求時(shí)將版本號(hào)加入請(qǐng)求頭方便后端統(tǒng)計(jì)和做接口版本兼容 getRequestHeaders() { return { X-Client-Version: this.currentVersion, X-Platform: H5 }; } } export default new VersionHelper();然后在main.js或 App.vue 中初始化// main.js 或 App.vue import versionHelper from /utils/version-helper; // ... 其他代碼 versionHelper.checkAndReload();H5版本的特別注意事項(xiàng)緩存問題H5資源極易被瀏覽器緩存。更新版本后用戶可能仍看到舊頁(yè)面。除了在構(gòu)建時(shí)添加文件hashwebpack默認(rèn)行為還可以通過上述版本檢測(cè)邏輯提示用戶刷新或配置服務(wù)器端的緩存控制策略如Cache-Control: no-cache。環(huán)境變量開發(fā)環(huán)境、測(cè)試環(huán)境、生產(chǎn)環(huán)境可能使用不同的版本號(hào)標(biāo)識(shí)。建議將環(huán)境信息如process.env.NODE_ENV也一并注入與版本號(hào)結(jié)合使用。4. 微信小程序端解析app.json與wx.getAccountInfoSync微信小程序的環(huán)境最為封閉其版本號(hào)嚴(yán)格由微信開發(fā)者工具上傳代碼時(shí)指定的版本決定并記錄在小程序的管理后臺(tái)。我們需要在小程序代碼內(nèi)部獲取這個(gè)由微信平臺(tái)管理的版本號(hào)。4.1 版本號(hào)的存儲(chǔ)位置app.json在小程序項(xiàng)目中uni-app編譯到小程序平臺(tái)后根目錄下有一個(gè)app.json文件其中包含了version字段。這個(gè)字段非常重要它是你每次上傳代碼時(shí)在開發(fā)者工具中填寫的版本號(hào)。// 小程序項(xiàng)目根目錄/app.json (由uni-app編譯生成) { pages: [...], window: {...}, version: 1.2.0, // 這是小程序的版本號(hào) // ... 其他配置 }重要區(qū)別這個(gè)version字段是編譯時(shí)由uni-app根據(jù)你在manifest.json-mp-weixin-version配置填充的。在uni-app源碼的manifest.json中配置mp-weixin: { appid: 你的小程序AppID, version: 1.2.0, // 這里配置會(huì)編譯到小程序的app.json // ... 小程序特有配置 }4.2 運(yùn)行時(shí)獲取wx.getAccountInfoSync在小程序運(yùn)行時(shí)我們無(wú)法直接讀取app.json文件它不在代碼包的可訪問范圍內(nèi)。微信官方提供了wx.getAccountInfoSync()API 來(lái)獲取小程序賬號(hào)信息其中就包含了版本號(hào)。// 在小程序頁(yè)面或App中 // #ifdef MP-WEIXIN onLoad() { try { const accountInfo wx.getAccountInfoSync(); console.log(小程序賬號(hào)信息:, accountInfo); // 關(guān)鍵版本號(hào)在這里 const miniProgramVersion accountInfo.miniProgram.version; console.log(微信小程序版本號(hào):, miniProgramVersion); // 輸出1.2.0 // 你也可以獲取小程序appid const appId accountInfo.miniProgram.appId; this.setData({ version: miniProgramVersion, appId: appId }); // 同樣可以用于檢查更新 this.checkMiniProgramUpdate(miniProgramVersion); } catch (err) { console.error(獲取小程序賬號(hào)信息失敗:, err); // 降級(jí)方案如果API失敗可以嘗試從全局變量或自己維護(hù)的配置中讀取 this.setData({ version: require(/manifest.json).mp-weixin.version || 未知 }); } }, methods: { checkMiniProgramUpdate(currentVersion) { // 小程序有自帶的更新機(jī)制但有時(shí)我們需要自己的邏輯 const updateManager wx.getUpdateManager(); updateManager.onCheckForUpdate(function (res) { // 請(qǐng)求完新版本信息的回調(diào) console.log(是否有新版本:, res.hasUpdate); }); updateManager.onUpdateReady(function () { wx.showModal({ title: 更新提示, content: 新版本已經(jīng)準(zhǔn)備好是否重啟應(yīng)用, success: function (res) { if (res.confirm) { // 新的版本已經(jīng)下載好調(diào)用 applyUpdate 應(yīng)用新版本并重啟 updateManager.applyUpdate(); } } }); }); // 你也可以向自己的服務(wù)器報(bào)告當(dāng)前版本用于統(tǒng)計(jì)和兼容性處理 wx.request({ url: https://your-api.com/mini-program/version-report, data: { version: currentVersion }, // ... }); } } // #endif4.3 小程序版本管理的實(shí)踐細(xì)節(jié)條件編譯和App端一樣獲取小程序版本號(hào)的代碼必須用// #ifdef MP-WEIXIN包裹避免在其他平臺(tái)報(bào)錯(cuò)。API兼容性wx.getAccountInfoSync()是一個(gè)基礎(chǔ)庫(kù)版本要求較低的API通常無(wú)需擔(dān)心兼容性。但出于穩(wěn)健考慮可以在app.vue的onLaunch里調(diào)用并做好try-catch。開發(fā)版、體驗(yàn)版、正式版wx.getAccountInfoSync()獲取到的是當(dāng)前運(yùn)行環(huán)境的版本號(hào)。在開發(fā)者工具上它返回的是你在項(xiàng)目配置中設(shè)置的版本在體驗(yàn)版或正式版返回的就是上傳時(shí)對(duì)應(yīng)的版本。你可以通過accountInfo.miniProgram.envVersion來(lái)區(qū)分當(dāng)前是開發(fā)、體驗(yàn)還是正式環(huán)境。uni-app編譯差異請(qǐng)注意uni-app編譯到微信小程序時(shí)manifest.json中的version會(huì)直接拷貝到dist/dev/mp-weixin/app.json中。如果你需要?jiǎng)討B(tài)版本號(hào)比如從CI/CD管道傳入可能需要編寫自定義的構(gòu)建腳本在編譯前修改manifest.json或直接修改生成的app.json。小程序后臺(tái)版本管理在小程序管理后臺(tái)你可以看到所有已上傳的代碼版本列表。wx.getAccountInfoSync()獲取的版本號(hào)必須與后臺(tái)某個(gè)已上傳的版本號(hào)一致。這是小程序版本控制的核心。5. 統(tǒng)一封裝與多端適配策略了解了各端的獨(dú)立獲取方法后在實(shí)際項(xiàng)目中我們肯定不希望在每個(gè)需要版本號(hào)的地方都寫一堆條件編譯。一個(gè)優(yōu)雅的解決方案是創(chuàng)建一個(gè)統(tǒng)一的版本管理工具模塊。5.1 創(chuàng)建版本管理工具類在src/utils目錄下創(chuàng)建appVersion.js// src/utils/appVersion.js class AppVersion { constructor() { this.platform this._getPlatform(); this.versionInfo null; } // 私有方法獲取精確平臺(tái) _getPlatform() { // uni-app 提供的平臺(tái)判斷 const systemInfo uni.getSystemInfoSync(); let platform systemInfo.platform ? systemInfo.platform.toLowerCase() : ; // 進(jìn)一步細(xì)化App平臺(tái) // #ifdef APP-PLUS if (platform android || platform ios) { return app-${platform}; } // #endif // #ifdef H5 return h5; // #endif // #ifdef MP-WEIXIN return mp-weixin; // #endif // 其他平臺(tái)... return platform; } // 異步獲取版本信息推薦 async getVersionInfo() { if (this.versionInfo) { return this.versionInfo; } const info { platform: this.platform, versionName: 未知, versionCode: 0, appId: , fullInfo: {} }; try { // #ifdef APP-PLUS if (this.platform.startsWith(app-)) { await new Promise((resolve) { document.addEventListener(plusready, () { plus.runtime.getProperty(plus.runtime.appid, (inf) { info.versionName inf.version; info.versionCode inf.versionCode || 0; info.appId inf.appid; info.fullInfo inf; resolve(); }); }); }); } // #endif // #ifdef H5 if (this.platform h5) { // 假設(shè)通過構(gòu)建注入存在全局變量或模塊中 info.versionName process.env.VERSION || H5_DEV_VERSION; info.appId window.location.hostname; // H5用域名作為標(biāo)識(shí) info.fullInfo { env: process.env.NODE_ENV }; } // #endif // #ifdef MP-WEIXIN if (this.platform mp-weixin) { const accountInfo wx.getAccountInfoSync(); info.versionName accountInfo.miniProgram.version; info.appId accountInfo.miniProgram.appId; info.fullInfo accountInfo; } // #endif } catch (error) { console.error([AppVersion] 獲取 ${this.platform} 版本信息失敗:, error); // 降級(jí)處理從本地存儲(chǔ)讀取上次成功的記錄 const fallback uni.getStorageSync(last_known_version); if (fallback) { Object.assign(info, fallback); } } this.versionInfo info; // 可選存儲(chǔ)到本地供降級(jí)使用 uni.setStorageSync(last_known_version, info); return info; } // 同步獲取版本號(hào)簡(jiǎn)易版可能不適用于App的異步場(chǎng)景 getVersionNameSync() { // #ifdef MP-WEIXIN try { return wx.getAccountInfoSync().miniProgram.version; } catch (e) { return 未知; } // #endif // #ifdef H5 return process.env.VERSION || H5_DEV_VERSION; // #endif // #ifdef APP-PLUS // App端無(wú)法真正同步獲取這里返回一個(gè)占位或觸發(fā)警告 console.warn(App端請(qǐng)使用異步方法 getVersionInfo()); return App版本(需異步獲取); // #endif return 未知平臺(tái); } // 統(tǒng)一的檢查更新入口策略模式 async checkUpdate() { const versionInfo await this.getVersionInfo(); switch (this.platform) { case app-android: case app-ios: return this._checkAppUpdate(versionInfo); case mp-weixin: return this._checkMiniProgramUpdate(); case h5: return this._checkH5Update(versionInfo); default: console.warn(平臺(tái) ${this.platform} 的更新檢查未實(shí)現(xiàn)); } } // 各平臺(tái)具體的更新檢查邏輯內(nèi)部方法 async _checkAppUpdate(info) { // 調(diào)用自己的后端接口判斷是否需要整包更新或熱更新 // 這里簡(jiǎn)化示例 const res await uni.request({ url: https://api.your-app.com/check-update/app, data: { platform: this.platform, versionName: info.versionName, versionCode: info.versionCode } }); return res.data; } _checkMiniProgramUpdate() { return new Promise((resolve) { const updateManager wx.getUpdateManager(); updateManager.onCheckForUpdate(resolve); }); } _checkH5Update(info) { // H5更新通常是資源更新可以檢查一個(gè)服務(wù)器上的version.txt文件 // 或者通過Service Worker管理 return new Promise((resolve) { // 示例請(qǐng)求一個(gè)包含最新版本號(hào)的manifest文件 fetch(/version-manifest.json) .then(r r.json()) .then(serverInfo { resolve({ hasUpdate: serverInfo.version ! info.versionName, newVersion: serverInfo.version, description: serverInfo.description }); }) .catch(() resolve({ hasUpdate: false })); }); } } // 導(dǎo)出單例 export default new AppVersion();5.2 在項(xiàng)目中使用統(tǒng)一工具在App.vue中初始化并全局掛載// App.vue import appVersion from /utils/appVersion; export default { onLaunch() { // 異步獲取并存儲(chǔ)版本信息 appVersion.getVersionInfo().then(info { console.log(應(yīng)用啟動(dòng)版本信息:, info); this.$store.commit(setVersionInfo, info); // 可以根據(jù)策略決定是否立即檢查更新 if (info.platform mp-weixin) { // 小程序可以立即檢查 appVersion.checkUpdate(); } else if (info.platform.startsWith(app-)) { // App可以延遲幾秒檢查避免影響啟動(dòng)速度 setTimeout(() appVersion.checkUpdate(), 3000); } }); } };在頁(yè)面組件中方便地使用template view classabout-page text當(dāng)前版本{{ versionInfo.versionName }}/text text平臺(tái){{ versionInfo.platform }}/text button clickcheckUpdate檢查更新/button /view /template script import appVersion from /utils/appVersion; export default { data() { return { versionInfo: {} }; }, async onLoad() { this.versionInfo await appVersion.getVersionInfo(); }, methods: { async checkUpdate() { const result await appVersion.checkUpdate(); if (result result.hasUpdate) { uni.showModal({ title: 發(fā)現(xiàn)新版本, content: 是否更新到版本 ${result.newVersion}, // ... 處理更新邏輯 }); } else { uni.showToast({ title: 已是最新版本, icon: success }); } } } }; /script5.3 多端適配的進(jìn)階考量版本號(hào)對(duì)比邏輯不同平臺(tái)的版本號(hào)格式可能不同如App有versionCode整數(shù)H5只有字符串。在設(shè)計(jì)后端接口或本地對(duì)比邏輯時(shí)需要針對(duì)不同平臺(tái)制定對(duì)比規(guī)則。例如App端優(yōu)先對(duì)比versionCodeH5和小程序則對(duì)比versionName字符串。灰度發(fā)布對(duì)于App可以根據(jù)versionName或versionCode在后端配置灰度規(guī)則。對(duì)于小程序可以利用微信的“灰度發(fā)布”功能。對(duì)于H5可以通過Cookie或URL參數(shù)來(lái)控制不同用戶看到不同版本。錯(cuò)誤監(jiān)控與統(tǒng)計(jì)將獲取到的版本號(hào)作為關(guān)鍵字段附加到所有的錯(cuò)誤上報(bào)如Sentry和用戶行為統(tǒng)計(jì)如友盟、Google Analytics中。這樣當(dāng)某個(gè)版本出現(xiàn)Bug時(shí)你可以快速定位受影響的用戶范圍。環(huán)境區(qū)分在開發(fā)、測(cè)試、生產(chǎn)環(huán)境中版本號(hào)的獲取邏輯應(yīng)保持一致但版本號(hào)的值可能不同。可以通過注入不同的環(huán)境變量如process.env.ENV來(lái)區(qū)分并在日志和上報(bào)中明確體現(xiàn)。通過這樣一個(gè)統(tǒng)一的封裝我們不僅解決了各端版本號(hào)獲取方式不同的問題還將版本管理相關(guān)的邏輯獲取、檢查、更新集中到了一處大大提升了代碼的可維護(hù)性和可擴(kuò)展性。當(dāng)需要增加新的平臺(tái)如支付寶小程序、抖音小程序時(shí)只需要在這個(gè)工具類中添加對(duì)應(yīng)的條件編譯塊和實(shí)現(xiàn)邏輯即可。