@kjy/jssdk

专门用于构建各种jssdk

Usage no npm install needed!

<script type="module">
  import kjyJssdk from 'https://cdn.skypack.dev/@kjy/jssdk';
</script>

README

KJY JSSDK

专门用于构建各种场景下的JSSDK

聊天室浮标JSSDK

引入方式

CDN方式

<script src="//yun.duiba.com.cn/kjy/jssdk/dist/online-chat.7fa2eb17.js"></script>

模块化方式

import OnlineChat from '@kjy/jssdk/dist/online-chat'

使用

const onlineChat = new OnlineChat({
  scid: 2,
  // position可以设置浮标的定位，默认为{bottom: 40, right: 20}
  // position: {
  //   top: 10,
  //   right: 10,
  //   bottom: 10,
  //   left: 10
  // }
})

/* 在React/Vue中，离开页面时可能需要销毁实例 */
onlineChat.destory()
埋点JSSDK

引入方式

CDN方式

<script src="//yun.duiba.com.cn/kjy/jssdk/dist/kpm.73936f12.js"></script>

模块化方式

import kpm from '@kjy/jssdk/dist/kpm'

使用

// 曝光埋点
kpm.api.exposure({
  dpm: '1.2.3.4'
}, () => {
  // 埋点完成的回调
})

// 点击埋点
kpm.api.click({
  dpm: '1.2.3.4'
}, () => {
  // 埋点完成的回调
})

// 统计页面访问时长
var timer = new kpm.Timer({
  dpm: '1.2.3.4'
})

// 开始
timer.start()

// 停止
timer.stop()
活动JSSDK

引入方式

CDN方式

<script src="//yun.duiba.com.cn/kjy/jssdk/dist/activity.7dbbb0ee.js"></script>

模块化方式

import activity from '@kjy/jssdk/dist/activity'

使用

// 初始化,切勿执行多次
activity.init()
// 配置微信分享
activity.share({
  title: '公务员、上班族转行做保险，原因竟是......',
  desc: '你知道为什么做保险的人越来越多吗？',
  imgUrl: 'https://yun.duiba.com.cn/tuia/test/m9ca51561171706321.jpg',
  onMenuShareTimelineCallback: {
    success: function (res) {
      console.log('success')
    },
    fail: function (res) {
      console.log('fail')
    },
    cancel: function (res) {
      console.log('cancel')
    }
  },
  onMenuShareAppMessageCallback: {
    success: function (res) {
      console.log('success')
    },
    fail: function (res) {
      console.log('fail')
    },
    cancel: function (res) {
      console.log('cancel')
    }
  }
})

// 获取内容信息
activity.getH5Info(function(res) {
  console.log(res.data)
})

// 获取销售信息
activity.getSellerInfo(function(res) {
  console.log(res.data)
})

// 获取用户信息
activity.getUserInfo(function(res) {
  console.log(res.data)
})

/**
 * 提交表单，具体参数参考/kjy/mp/activity/sendInfo
 */
activity.sendInfo({
  visitName: '小明',
  visitPhone: '13888888888',
  visitExtra: {
    '活动名称': '甲状腺健康体检',
    '活动报名': '报名甲状腺健康体检'
  }
}, function(res) {
  console.log(res.data)
})

// 提交活动数据
// 
activity.getActivityNum({
  type: 0
}, function(res) {
  console.log(res.data)
})

// 获取活动数据
activity.increaseActivityNum({
  type: 0
}, function(res) {
  console.log(res.data)
})

注意：如果使用CDN引入方式，在调用时需要加上前缀KJJ，如KJJ.OnlineChat

开发

npm run dev

本地调试demo访问地址，http://localhost:9000/xxx/demo.html

开发流程

  1. 以online-chat作为模板参考，在src下建立一个新的JSSDK
  2. 在build/config.js中添加打包入口，名称为JSSDK文件夹名称

开发原则

  1. 禁止使用第三方库，以避免增加JSSDK的大小
  2. 本工程基于webpack构建，使用模块化进行开发

打包

npm run build

打包完成后会自动将JSSDK上传到CDN并打印出地址，以便于直接使用script的方式进行使用

发布

  1. 修改package.json版本号
  2. 更新README.md文档，修改CDN引用地址，使用方式等等
  3. 执行打包命令
  4. 发布到npm
npm publish --access public