opbasesdk

基线团队opbaseSDK使用文档

一、sdk的安装

1.1、node_modules形式

npm install opbasesdk --save

1.2、源码形式，获取源码

// webpack+vue2 中在public导入源码，在public/index.html引入
// webpack+vue3 中在public导入源码，在public/index.html引入
<script src="<%= BASE_URL %>opbasesdk.umd.cjs"></script>

// vite+vue3 中在public，在根目录只能够index.html引入
<script src="./public/opbasesdk.umd.cjs"></script>

1.3、CDN地址引入

文件地址：稍后会同步

二、使用上下文说明

2.1、框架项目以node_modules方式使用

// 在项目中的main.js中引入
import opskd from 'opbasesdk'

// Vue2 中使用
import Vue from "vue";
Vue.use(opskd,Option) // Option是业务配置

// Vue3 中使用
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.use(opskd,Option) // Option是业务配置

2.2、如果是 源码 或着 CDN 使用的

// 在项目的入口html中
opbaseSDK.init(Option) // Option是业务配置

这里的 上下文 就是sdk的 使用环境，归纳为三个环境 vue2、vue3、window，如果是vue项目，可以更好使用的vue生态，指令等

2.3、use 和 init的区别

use：使用了vue的插件系统，sdk能够灵活的使用vue生态的中的指令，能很方便的为业务侧提供比较通用的指令服务。
init：init不支持指令的使用。这样使用比较简洁。使用起来比较高效

三、使用源码展示

// vue环境使用
app.use(opskd, {
   // 项目编码
    product: "",
    // 需要上报api地址
    reportUrl:"",
    // sdk提供的按需可用的包
    require: ['tools', 'directive'], 
    // vue项目的路由对象
    router:router, 
    // 监控的相关配置
    monitor:{
        auto:true,
        debugger:true,
        type:"global"
    },
    // 上报之前的拦截器
    beforeReport(callback) {
        callback()
    }
})

// window环境使用
opbaseSDK.init({
   // 项目编码
    product: "",
    // 需要上报api地址
    reportUrl:"",
    // sdk提供的按需可用的包
    require: ['tools'], 
    // vue项目的路由对象
    router:router,
    // 监控的配置
    monitor: {
        auto: true,
        debugger: true,
        type:"global"
    },
     // 上报之前的拦截器
    beforeReport(callback) {
        callback()
    }
})

四、SDK的配置参数说明

字段名称	数据类型	上下文说明	是否必传	默认值	字段说明
product	String	vue && window	是	sdk_dev_test	使用sdk的项目编码
reportUrl	String	vue && window	否	忽略	上报数据的api
require	Array	require.tools在vue和window都生效，require.directive只在vue环境生效	否	无	可以选择配置的包名：tools、directive
router	Router[Object]	vue	否	无	vue环境下sdk支撑路由拦截监控
monitor	[Object]	vue && window	否	无	监控的相关配置
monitor.auto	Boolean	vue && window	否	true	引入sdk后立即启动监控
monitor.debugger	Boolean	vue && window	否	false	提供调试功能，设置为true的时候，不会上报数据，会打印出日志
monitor.type	String	vue && window	否	global	**global：**启用全局监控，**router：**启用路由拦截监控
beforeReport	Funtion	vue && window	否	无	上报前的数据拦截器，根据业务需要拓展上报数据

五、点击上报

data-report 和 v-report
data-report 和 v-report 是sdk为使用者提供的两种点击上报数据的方式，值为需要点击上报数据的元素名称

<!-- 普通上报 -->
<button data-report="button-code">普通按钮</button>
<el-button data-report="button-code">组件按钮</el-button>
<div data-report="button-code">自定义元素</div>

<!-- 元素嵌套 -->
<div data-report="out-area">
  <div data-report="inner-area"></div>
</div>

<!-- 如果引入了指令 -->
<!-- 点击上报 -->
<button v-report="button-code">普通按钮</button>
<!-- 元素在是否在可视区域 -->
<button v-visual="button-code">普通按钮</button>

六、兼容性

使用类型	兼容项目类型	说明
源码使用	不存在兼容问题	推荐使用
包引入	webpack5.0+	老项目（vue-cli2.0生成的项目）不支持