1.0.5 • Published 9 months ago
opbasesdk v1.0.5
基线团队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 | RouterObject | 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生成的项目)不支持 |