permission-jiniu

目录结构

├─lib - 打包后的插件目录
│  amp-log-jiniu.js - 插件入口文件
│  amp-log-jiniu.umd.cjs
├─plugins - 插件目录
│ ├─config - 组件目录
│ │ ├─index.ts - md5加盐方式中的盐字符串
│ │ └─Scene.js - 小程序场景值对应的信息
│ ├─directives - 指令目录
│ │ ├─Btnlog
│ │ │ └─index.js - 按钮指令
│ │ └─index.ts - 注册指令，并对外暴漏install方法
│ ├─log - 指令目录
│ │ └─index.js - 日志类，用于发送请求及添加设备及用户相关参数
│ ├─mixin
│ │ └─index.js - 混淆类，用于植入代码，监听路由及用户操作
│ ├─utils
│ │ └─index.js - 工具函数
│ └─index.js- 插件入口文件
├─src - 测试插件的项目代码目录
│ ├─pages - 测试插件的页面代码目录
│ ├─App.vue
│ └─main.js - 项目入口文件
└─package.json - 项目信息，插件信息，打包成插件命令，依赖包信息

文件内容解析

package.json

├─package.json
│ ├─"name": "@jiniu/apm-log-jiniu",
│ ├─"version": "0.0.1",  插件版本号
│ ├─"description": "@jiniu/apm-log-jiniu",  插件描述
│ ├─"main": "lib/amp-log-jiniu.js",  插件入口文件(此文件为打包后的插件目录下的入口文件)
│ └─"keywords": ["test"],  插件关键词，用于npm搜索

log/index.ts

| 方法 | 描述 | 参数 | | :---------------- |:------------------------|:-----------------------------------------------------------------------------------------------------------| | constructor | 类的构造函数，用于实例化的时候，存储相关参数， | args - 配置信息，参考下方插件使用方法 | | initDeviceInfo | 初始化用户当前浏览网站或小程序端的设备信息， | - | | initTaskQueue | 创建任务并初始化任务队列 | - | | isBreak | 根据项目配置，过滤路由 | (args, content) 接受两个参数：1、页面跳转的相关信息，2、页面跳转的路径 | | addTask | 添加任务 | (actionType, args)接收两个参数:1.用户行为,2.页面跳转的相关信息 |

mixin/index.ts

| 方法 | 描述 | 参数 | | :---------------- |:------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------| | constructor | 类的构造函数，用于实例化的时候，存储相关信息 | args - 配置信息，参考下方插件使用方法 | | init | 根据用户使用平台，初始化相关逻辑 | (router)接受一个参数，1、路由对象 | | initRouter | 用户使用浏览器访问平台时，初始化路由 | (router)接受一个参数，1、路由对象 | | initUniRouter | 用户使用小程序时，初始化路由 | - | | mountBtnFunction | 用户使用小程序，点击按钮时，调用此方法 | - | | mountExitSystemFunction | 用户使用小程序，退出小程序时，调用此方法 | - | | addListener | 添加浏览器标签栏监听事件 | - |

utils/index.ts

| 方法 | 描述 | 参数 | |:-----------|:------------|:-----------------------------------------------------------------------| | getTime | 获取时间 | - | | setSession | 设置session数据 | (key, val, uni) 接收3个参数:1.session key,2.value,3.uni对象，小程序端使用此插件时，会传入此参数 | | getSession | 设置session数据 | (key, uni) 接收2个参数:1.session key,2.uni对象，小程序端使用此插件时，会传入此参数 | | clearSession | 清除session数据 | (key, uni) 接收2个参数:1.session key,2.uni对象，小程序端使用此插件时，会传入此参数 | | generateUUID | 生成uuid | - |

插件使用方法

1.安装插件 在项目根目录下执行 npm install @jiniu/apm-log-jiniu --save 2.引入插件 main.js 中引入插件 import ApmLogJiniu from '@jiniu/apm-log-jiniu' 3.使用插件 在 main.js 中使用插件 app.use(PermissionJiNiu, configuration)

• configuration：{} - 为配置参数，配置参数为对象，目前支持的配置参数如下：
  • router: 项目中的路由对象
  • envUrl: 接口路径
  • appChannelId: "",
  • dataChannelId: "",
  • getAccountFn: 方法，返回用户账号
  • getNickNameFn: '' 方法，返回用户nickName

5.添加指令 找到按钮 添加自定义指令 v-Btnlog 即可

插件使用示例

详情请看 例子

插件打包及发布步骤

1. 编写好插件代码 2. 在项目中测试，可用 3. 执行npm run build-lib 4. 项目根目录执行 npm whoami 查看当前npm用户名 5. 如果 4 执行后，显示用户名，则，执行npm publish --access public, 否则执行npm login，登录npm后，重新在项目根目录执行npm publish

命令解析

vue-cli-service build --target lib --name jn-permission-plugin --dest lib plugins/index.js

• target lib // 默认为构建应用，改为 lib 即可启用构建库模式
• name jiniu-component-library-test // 输出文件名
• dest lib // 输出目录，默认为 dist，这里我们改为 lib
• plugins/index.js // 入口文件路径，默认为 src/App.vue，这里改为 plugin/index.js