refactor(platform): extract platform detection into separate module

移除各文件中重复的平台检测代码,统一封装到platform.js模块,添加缓存优化,支持多端平台检测、app_type和显示名称获取等能力,简化后续平台相关代码维护
This commit is contained in:
2026-05-25 14:19:52 +08:00
parent 107b5dd71b
commit 22a89013d0
5 changed files with 223 additions and 129 deletions

View File

@@ -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;
}

View File

@@ -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 桥接

View File

@@ -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) {

199
common/js/platform.js Normal file
View File

@@ -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;

View File

@@ -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,