refactor(platform): extract platform detection into separate module
移除各文件中重复的平台检测代码,统一封装到platform.js模块,添加缓存优化,支持多端平台检测、app_type和显示名称获取等能力,简化后续平台相关代码维护
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 桥接
|
||||
|
||||
@@ -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
199
common/js/platform.js
Normal 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;
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user