bdmp-common-js

前端js公共服务库

安装

npm install bdmp-common-js -S

安装完毕之后

1. 使用埋点工具（biSensors）

import {biSensors} from 'bdmp-common-js'

// 初始化埋点
// 参数可选：project用于判断存储埋点数据是存在测试环境还是线上环境，默认是'production'（线上环境）。可选值：'production'（线上环境） || 'default'（测试环境）
biSensors.init({
    project: 'production' || 'default'
})
// 设置用户信息
biSensors.setProfile({
    user_no: '工号',
    user_name: '用户名称'
})
// 登录
biSensors.login('工号')
// 首页埋点-全局埋点
biSensors.registerPage({
    platform_type: 'H5',
    app_code: '指定的属性code',
    app_name: '指定的属性名称'
})
// 自定义监控埋点
biSensors.track({
    event: '事件名称',
    parameter: {...'事件属性'}
})

2. 使用websocket工具（biSocket）

import {biSocket} from 'bdmp-common-js'

// 初始化websocket链接
biSocket.initWebSocket('url').then(res => {})

// 发送消息，任意参数
biSocket.sendMsg('msg')

// 初始化模块接收消息实例

// 第一种场景：使用模块id，独立模块不互相影响时
biSocket.receiveMsg('moduleId', function(res){
    // 接收成功的回调函数，判断数据，渲染数据
    console.log(res)
}, function(error) {
    // 接收发生错误时的回调函数，需要你手动调用https请求
    console.log(error)
}, function(errCatch) {
    // 彻底不接收消息时的回调函数，需要你设置定时器轮询请求https
    console.log(errCatch)
})
// 第二种场景：使用后台特定的主题类似时，比如推送弹幕、推送特殊消息时
biSocket.receiveMsg('与后台约定好的event_type', function(res){
    // 接收成功的回调函数，判断数据，渲染数据
    console.log(res)
}, function(error) {
    // 接收发生错误时的回调函数，需要你手动调用https请求
    console.log(error)
}, function(errCatch) {
    // 彻底不接收消息时的回调函数，需要你设置定时器轮询请求https
    console.log(errCatch)
})
// 第三种场景：当使用模块id时，页面出现两个模块共用一个id时，则使用这种方法
biSocket.receiveMsg({
    id: 'moduleId'
}, function(res){
    // 接收成功的回调函数，判断数据，渲染数据
    console.log(res)
}, function(error) {
    // 接收发生错误时的回调函数，需要你手动调用https请求
    console.log(error)
}, function(errCatch) {
    // 彻底不接收消息时的回调函数，需要你设置定时器轮询请求https
    console.log(errCatch)
})

// 关闭websocket连接
biSocket.clearTimer()

3. 使用前端页面监控工具（biWebErrorLog）

import { biWebErrorLog } from 'bdmp-common-js'
/**
 * 第一个参数 systemId 系统id/系统标识
 * 第二个参数 fetchInfo 请求信息, 格式: {url: 'xxxx/xxx', headers: {}, method: 'POST'}
 * 第三个参数 Vue 若需要监控vue页面的话，则需要传递Vue实例
 */
biWebErrorLog('systemId', {
    url: 'xxxx/xxx', 
    headers: {}, 
    method: 'POST'
}, 'Vue实例')

4. 加密（biSignatureStr）

import { biSignatureStr } from 'bdmp-common-js'
/**
    作用：该方法用于将某个对象进行加密，当前用于与后台接口交互过程中参数进行加密
 * 第一个参数 参数对象。必传
 * 第二个参数 加密规则密钥。必传
 * 第三个参数 md5实例，可以通过cnpm install [email protected] -S。必传
 */
biSignatureStr({
    name: 'xxx',
    ...
}, 'SignatureStr', 'md5实例')

5. 请求头统一封装且加密（biRequestHeader）

import { biSignatureStr } from 'bdmp-common-js'
/**
    作用：该方法用于axios统一处理请求头的方法，且包含加密功能
 * 第一个参数 aixos拦截config对象。必传
 * 第二个参数 加密规则密钥。必传
 * 第三个参数 md5实例，可以通过cnpm install [email protected] -S。必传
 */
// 使用案例
axios.interceptors.request.use(
  (config) => {
    biRequestHeader(config, 'SignatureStr', 'md5实例')
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)