From 22a89013d0241cc61efc205c98c3a6fcb39e436e Mon Sep 17 00:00:00 2001 From: ZF sun <34314687@qq.com> Date: Mon, 25 May 2026 14:19:52 +0800 Subject: [PATCH] refactor(platform): extract platform detection into separate module MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 移除各文件中重复的平台检测代码，统一封装到platform.js模块，添加缓存优化，支持多端平台检测、app_type和显示名称获取等能力，简化后续平台相关代码维护 --- common/js/customer-service.js | 36 +++--- common/js/event-bus.js | 50 +-------- common/js/http.js | 36 +----- common/js/platform.js | 199 ++++++++++++++++++++++++++++++++++ common/js/util.js | 31 +----- 5 files changed, 223 insertions(+), 129 deletions(-) create mode 100644 common/js/platform.js diff --git a/common/js/customer-service.js b/common/js/customer-service.js index 5edbbd1..2b81d52 100644 --- a/common/js/customer-service.js +++ b/common/js/customer-service.js @@ -3,6 +3,7 @@ * 整合各种客服方式，提供统一的调用接口 */ import IMAGE_CONFIG from './image-config.js'; +import Platform from './platform.js'; export class CustomerService { constructor(vueInstance, externalConfig = null) { @@ -30,28 +31,25 @@ export class CustomerService { return this.latestPlatformConfig; } - // 优先级：外部传入 > vuex store > 空对象 const servicerConfig = this.externalConfig || this.vm.$store.state.servicerConfig || {}; + const platformMap = { + h5: 'h5', + weapp: 'weapp', + alipay: 'aliapp', + baidu: 'baidu', + toutiao: 'toutiao', + qq: 'qq', + kuaishou: 'kuaishou', + jd: 'jd', + '360': '360', + xhs: 'xhs', + app: 'app', + pc: 'pc' + }; - let platformConfig = null; + const platformKey = platformMap[Platform.detect()] || Platform.detect(); + let platformConfig = servicerConfig[platformKey] && typeof servicerConfig[platformKey] === 'object' ? servicerConfig[platformKey] : null; - // #ifdef H5 - platformConfig = servicerConfig.h5 && typeof servicerConfig.h5 === 'object' ? servicerConfig.h5 : null; - // #endif - - // #ifdef MP-WEIXIN - platformConfig = servicerConfig.weapp && typeof servicerConfig.weapp === 'object' ? servicerConfig.weapp : null; - // #endif - - // #ifdef MP-ALIPAY - platformConfig = servicerConfig.aliapp && typeof servicerConfig.aliapp === 'object' ? servicerConfig.aliapp : null; - // #endif - - // #ifdef PC - platformConfig = servicerConfig.pc && typeof servicerConfig.pc === 'object' ? servicerConfig.pc : null; - // #endif - - // 防止空数组被当作有效配置 if (Array.isArray(platformConfig)) { platformConfig = null; } diff --git a/common/js/event-bus.js b/common/js/event-bus.js index 9c7f257..a5e0cdb 100644 --- a/common/js/event-bus.js +++ b/common/js/event-bus.js @@ -12,57 +12,13 @@ * @createTime 2023-08-10 */ +import Platform from './platform.js' + class EventBus { constructor() { this.events = new Map() this.domBridge = null - this.platform = this.detectPlatform() - } - - // 检测平台 - detectPlatform() { - // #ifdef H5 - return 'h5' - // #endif - - // #ifdef MP-WEIXIN - return 'weapp' - // #endif - - // #ifdef MP-ALIPAY - return 'alipay' - // #endif - - // #ifdef MP-BAIDU - return 'baidu' - // #endif - - // #ifdef MP-TOUTIAO - return 'toutiao' - // #endif - - // #ifdef MP-QQ - return 'qq' - // #endif - - // #ifdef MP-KUAISHOU - return 'kuaishou' - // #endif - - // #ifdef MP-JD - return 'jd' - // #endif - - // #ifdef MP-360 - return '360' - // #endif - - // #ifdef MP-XHS - return 'xhs' - // #endif - - - return 'unknown' + this.platform = Platform.detect() } // 设置 DOM 桥接 diff --git a/common/js/http.js b/common/js/http.js index 3bd8664..a7a8b22 100644 --- a/common/js/http.js +++ b/common/js/http.js @@ -1,41 +1,9 @@ import Config from './config.js' import Util from './util.js' import store from '@/store/index.js' +import Platform from './platform.js' -// #ifdef H5 -const app_type = Util.isWeiXin() ? 'wechat' : 'h5'; -const app_type_name = Util.isWeiXin() ? '微信公众号' : 'H5'; -// #endif - -// #ifdef MP-WEIXIN -const app_type = 'weapp'; -const app_type_name = '微信小程序'; -// #endif - -// #ifdef MP-ALIPAY -const app_type = 'aliapp'; -const app_type_name = '支付宝小程序'; -// #endif - -// #ifdef MP-BAIDU -const app_type = 'baiduapp'; -const app_type_name = '百度小程序'; -// #endif - -// #ifdef MP-TOUTIAO -const app_type = 'MP-TOUTIAO'; -const app_type_name = '头条小程序'; -// #endif - -// #ifdef MP-QQ -const app_type = 'MP-QQ'; -const app_type_name = 'QQ小程序'; -// #endif - -// #ifdef APP-PLUS -const app_type = 'app'; -const app_type_name = 'APP'; -// #endif +const { app_type, app_type_name } = Platform.getPlatformInfo(); export default { sendRequest(params) { diff --git a/common/js/platform.js b/common/js/platform.js new file mode 100644 index 0000000..a726778 --- /dev/null +++ b/common/js/platform.js @@ -0,0 +1,199 @@ +/** + * 统一平台检测模块 + * 消除分散在 http.js, util.js, event-bus.js, customer-service.js 中的重复平台检测代码 + */ + +let cachedPlatform = null; +let cachedAppType = null; +let cachedAppTypeName = null; + +export const Platform = { + /** + * 检测当前运行平台 + * @returns {string} 平台标识 + */ + detect() { + if (cachedPlatform) { + return cachedPlatform; + } + + // #ifdef H5 + cachedPlatform = 'h5'; + // #endif + + // #ifdef MP-WEIXIN + cachedPlatform = 'weapp'; + // #endif + + // #ifdef MP-ALIPAY + cachedPlatform = 'alipay'; + // #endif + + // #ifdef MP-BAIDU + cachedPlatform = 'baidu'; + // #endif + + // #ifdef MP-TOUTIAO + cachedPlatform = 'toutiao'; + // #endif + + // #ifdef MP-QQ + cachedPlatform = 'qq'; + // #endif + + // #ifdef MP-KUAISHOU + cachedPlatform = 'kuaishou'; + // #endif + + // #ifdef MP-JD + cachedPlatform = 'jd'; + // #endif + + // #ifdef MP-360 + cachedPlatform = '360'; + // #endif + + // #ifdef MP-XHS + cachedPlatform = 'xhs'; + // #endif + + // #ifdef APP-PLUS + cachedPlatform = 'app'; + // #endif + + // #ifdef PC + cachedPlatform = 'pc'; + // #endif + + if (!cachedPlatform) { + cachedPlatform = 'unknown'; + } + + return cachedPlatform; + }, + + /** + * 获取平台类型标识 (用于API请求) + * @returns {string} app_type 值 + */ + getAppType() { + if (cachedAppType) { + return cachedAppType; + } + + const platform = this.detect(); + + // #ifdef H5 + if (platform === 'h5') { + cachedAppType = this.isWeiXin() ? 'wechat' : 'h5'; + return cachedAppType; + } + // #endif + + const platformMap = { + weapp: 'weapp', + alipay: 'aliapp', + baidu: 'baiduapp', + toutiao: 'MP-TOUTIAO', + qq: 'MP-QQ', + kuaishou: 'kuaishou', + jd: 'jd', + '360': '360', + xhs: 'xhs', + app: 'app', + pc: 'pc' + }; + + cachedAppType = platformMap[platform] || 'unknown'; + return cachedAppType; + }, + + /** + * 获取平台类型名称 (用于显示) + * @returns {string} app_type_name 值 + */ + getAppTypeName() { + if (cachedAppTypeName) { + return cachedAppTypeName; + } + + const platform = this.detect(); + + // #ifdef H5 + if (platform === 'h5') { + cachedAppTypeName = this.isWeiXin() ? '微信公众号' : 'H5'; + return cachedAppTypeName; + } + // #endif + + const platformNameMap = { + weapp: '微信小程序', + alipay: '支付宝小程序', + baidu: '百度小程序', + toutiao: '头条小程序', + qq: 'QQ小程序', + kuaishou: '快手小程序', + jd: '京东小程序', + '360': '360小程序', + xhs: '小红书小程序', + app: 'APP', + pc: 'PC端' + }; + + cachedAppTypeName = platformNameMap[platform] || '未知平台'; + return cachedAppTypeName; + }, + + /** + * 判断是否运行在微信浏览器中 (H5环境) + * @returns {boolean} + */ + isWeiXin() { + // #ifdef H5 + return navigator.userAgent.toLowerCase().includes('micromessenger'); + // #endif + return false; + }, + + /** + * 判断是否是小程序环境 + * @returns {boolean} + */ + isMiniProgram() { + const platform = this.detect(); + const miniProgramPlatforms = ['weapp', 'alipay', 'baidu', 'toutiao', 'qq', 'kuaishou', 'jd', '360', 'xhs']; + return miniProgramPlatforms.includes(platform); + }, + + /** + * 判断是否是移动端 (小程序或H5或APP) + * @returns {boolean} + */ + isMobile() { + const platform = this.detect(); + return platform !== 'pc' && platform !== 'unknown'; + }, + + /** + * 获取完整的平台信息对象 + * @returns {Object} 包含 platform, appType, appTypeName + */ + getPlatformInfo() { + return { + platform: this.detect(), + appType: this.getAppType(), + appTypeName: this.getAppTypeName() + }; + }, + + /** + * 清除缓存 (用于测试或需要重新检测的场景) + */ + clearCache() { + cachedPlatform = null; + cachedAppType = null; + cachedAppTypeName = null; + } +}; + +export default Platform; diff --git a/common/js/util.js b/common/js/util.js index 8373949..c04466f 100644 --- a/common/js/util.js +++ b/common/js/util.js @@ -1,6 +1,7 @@ import Config from './config.js' import store from '@/store/index.js' import Http from './http.js' +import Platform from './platform.js' import { Weixin } from 'common/js/wx-jssdk.js'; @@ -381,35 +382,7 @@ export default { * @param url */ upload: function (num, params, callback, url) { - // #ifdef H5 - var app_type = this.isWeiXin() ? 'wechat' : 'h5'; - var app_type_name = this.isWeiXin() ? '微信公众号' : 'H5'; - // #endif - - // #ifdef MP-WEIXIN - var app_type = 'weapp'; - var app_type_name = '微信小程序'; - // #endif - - // #ifdef MP-ALIPAY - var app_type = 'aliapp'; - var app_type_name = '支付宝小程序'; - // #endif - - // #ifdef MP-BAIDU - var app_type = 'baiduapp'; - var app_type_name = '百度小程序'; - // #endif - - // #ifdef MP-TOUTIAO - var app_type = 'MP-TOUTIAO'; - var app_type_name = '头条小程序'; - // #endif - - // #ifdef MP-QQ - var app_type = 'MP-QQ'; - var app_type_name = 'QQ小程序'; - // #endif + const { app_type, app_type_name } = Platform.getPlatformInfo(); var data = { token: store.state.token, app_type: app_type,