SlugTeam

# 使用

# 示例

# 代码示例

在需要绑定分享的元素上的 class 加上'sharebtn'即可

<html>
  ...
  <div class="sharebtn"></div>
  ...
</html>
<script
  charset="utf-8"
  src="https://tiem-cdn.qq.com/slugteam/components/share/v1/index.min.js"
></script>
<script>
  const share = new SlugShare({
    el: '.sharebtn',
    title: '分享标题～', //不设置或设置为空时，页面有title，则调取title
    desc: '分享描述～', //不设置或设置为空时，页面有Description，则调取Description
    imgUrl: 'https://game.gtimg.cn/images/XXX.png', //分享图片尺寸200*200，且填写绝对路径
    url: 'https://pvp.qq.com/XXX.html', // 可选，分享页面链接，为空时默认为当前页面url
    actName: 'xxx', //点击流名称，移动端多页面分享时加上
    channels: ['wxt', 'wxf', 'qqf', 'qqz'],
    options: {
      msdkicon: 'https://game.gtimg.cn/images/XXX.png', //高版本直接传图分享，低版本走自动截屏的方式
    },
    onShareShow: function() {
      alert('分享菜单弹出')
    },
    onShareClose: function() {
      alert('分享菜单关闭')
    },
    afterShare: function(channel, status) {
      // 可选，点击分享后的回调函数
      // channel为选择分享的平台, status为分享成功状态
      alert('分享关闭')
    },
    outgameTipsIcon: 'https://game.gtimg.cn/images/XXX.png', //为空时，没有蒙层提示，配置时，有蒙层提示
  })
  setTimeout(() => {
    share.showMenu()
  }, 1000)
  setTimeout(() => {
    share.closeMenu()
  }, 1000)
  share.setShareConfig({
    url: 'https://pvp.qq.com/YYY.html',
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 分享效果示例

image

# 配置信息

# el（选填）msdksdk移动端

  • 类型： string

  • 示例 ： '.share'

  • default ： '.sharebtn'

  • 说明：分享菜单点击弹出按钮

TIP

v1.1.0 新增

# title（必填）msdksdk移动端

  • 类型： string

  • 示例 ： '这里是分享的标题'

  • 说明：分享标题

# desc(必填)msdksdk移动端

  • 类型： string

  • 示例 ： '这里是分享的描述'

  • 说明：分享描述

# imgUrl(必填)msdksdk移动端

  • 类型： string

  • 示例 ： 'https://v1.vuepress.vuejs.org/zh/guide/markdown.html'

  • 说明：slugsdk 下和双端平台下，会以此配置为封面图，msdk 下，会以分享页的截图作为封面图

# url（可选）msdksdk移动端

  • 类型： string

  • 示例 ： 'https://v1.vuepress.vuejs.org/zh/guide/markdown.html'

  • 说明：分享出去的 url 链接，不填时默认为当前页面链接

TIP

url 中包含特殊字符（如中文字）时，用 encodeUrlComponnet

# actName（移动端必填）移动端

  • 类型： string

  • 示例 ： 'activity_20201111'

  • 说明：mosso 上报的 pagetype 字段,移动端分享必填

# channels（可选）msdksdk

  • 类型： array

  • 示例 ： ['wxt','wxf','qqf','qqz']

  • default ： ['wxt','wxf','qqf','qqz']

  • 说明：分享渠道

    • wxt 朋友圈
    • wxf 微信好友
    • qqf QQ 好友
    • qqz QQ 空间

效果如下: image

# options（可选）msdk

# msdkicon

  • 类型： string

  • 示例：'https://v1.vuepress.vuejs.org/zh/guide/markdown.html'

  • 说明：msdk分享时弹出图片，作为分享时的截图

# eventListener

  • 类型： string

  • default ：'click'

  • 示例：'click' | 'touchend' | 'touchstart'

  • 说明：事件绑定的方法

# outgameTipsIcon

  • 类型： string

  • default ：'click'

  • 示例：'click' | 'touchend' | 'touchstart'

# afterShare（可选）msdksdk移动端

  • 类型： Funtion

  • 说明：分享后的回调方法,参数：param（分享渠道）,status(是否分享成功状态)

# onShareShow（可选）msdksdk移动端

  • 类型： Funtion

  • 说明：分享栏拉起时调用

# onShareClose（可选）msdksdk移动端

  • 类型： Funtion

  • 说明: 分享栏被用户点击关闭时调用

# outgameTipsIcon移动端

分享提示按钮图片链接，默认效果如下:

image

# 方法

# showMenu()

  • 类型： Funtion

  • 说明: 显示分享弹窗口

# closeMenu()

  • 类型： Funtion

  • 说明: 关闭分享弹窗口

# setShareConfig(params)

  • 类型： Funtion

  • 说明: 重设分享配置，覆盖原配置

# shareTo(channelId)

  • 类型： Funtion

  • 参数：channelId: string

    • wxt 朋友圈
    • wxf 微信好友
    • qqf QQ 好友
    • qqz QQ 空间

  • 说明: 直接分享到某个渠道

← Change Log →