# opbasesdk

> ### 一、sdk的安装

Latest version **1.0.5** (published 2023-08-23) · 0 weekly downloads

## Install

```sh
npm install opbasesdk
pnpm add opbasesdk
yarn add opbasesdk
bun add opbasesdk
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-08-23 |
| First published | 2023-08-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 884.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | qjiang |

## Links

- npm: https://www.npmjs.com/package/opbasesdk
- npm.io page: https://npm.io/package/opbasesdk

## Dependencies (5)

- [axios](https://npm.io/package/axios.md) ^1.1.3
- [element-plus](https://npm.io/package/element-plus.md) ^2.3.0
- [browser-crypto](https://npm.io/package/browser-crypto.md) ^1.4.0
- [@aws-crypto/sha256-js](https://npm.io/package/@aws-crypto/sha256-js.md) ^2.0.2
- [@fingerprintjs/fingerprintjs](https://npm.io/package/@fingerprintjs/fingerprintjs.md) ^3.4.2

## Recent versions

- 1.0.5 (latest) — 2023-08-23
- 1.0.4 — 2023-08-21
- 1.0.3 — 2023-08-21
- 1.0.2 — 2023-08-18
- 1.0.1 — 2023-08-07

## README

# 基线团队opbaseSDK使用文档

### 一、sdk的安装

#### 1.1、node_modules形式

```javascript
npm install opbasesdk --save
```

#### 1.2、源码形式，[获取源码](http://wiki.virtueit.net/pages/viewpage.action?pageId=101102371)

```javascript

// 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方式使用

```javascript
// 在项目中的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*** 使用的

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

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

#### 2.3、use 和 init的区别

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

### 三、使用源码展示

```javascript
// 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为使用者提供的两种点击上报数据的方式，值为需要点击上报数据的元素名称

```html
<!-- 普通上报 -->
<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生成的项目）不支持|

---
_Source: https://npm.io/package/opbasesdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._