Skip to content

greedying/tctip

Repository files navigation

tctip打赏插件

tctip是什么

tctip是一个js插件,作用是在web网页右侧生成一个打赏浮动窗
可下载后到demo目录查看效果

tctip当前版本

  • 当前大版本为 1.x.x此版本为大版本变动,不兼容老版,请使用当前版本
  • 当前小版本请查看package中的版本号,尽量使用最新版本
  • 历史版本为0.1已不再维护,不再维护,如有需求,点此切换

当前版本特点

  • 界面暂时维持不变
  • 参数配置和使用方式不兼容老版本
  • 只需引入一个js文件,不需要额外引入js、css等
  • 同时支持umdwebpack等方法使用

demo

  • 您可以到demo目录查看简单demo
  • 在线demo,则点此查看

使用方法

页面使用(多数人的使用方式)

第一步,引入js

一般引入min版本,即引入tctip-版本号.min.js文件
在当前项目中即dist/tctip-1.0.4.min.js

  • 您可以把此js文件下载到您的服务器合适目录进行引用
  • 您也可以直接使用我提供的静态链接http(s)://static.tctip.com/tctip-1.0.4.min.js
  <script src="//static.tctip.com/tctip-1.0.4.min.js"></script>

第二步,新建tctip变量,同时传入配置参数,然后运行init函数

  new tctip({
    top: '20%',
    button: {
      id: 9,
      type: 'dashang',
    },
    list: [
      {
        type: 'alipay',
        qrImg: './images/alipay.jpg'
      }, {
        type: 'wechat',
        qrImg: './images/wechat.jpg'
      }, {
        type: 'bitcoin',
        qrContent: '1PhQySHF1ZuoRwoZ8G4CDLEtE6fAnD3GJP'
      }
    ]
  }).init()

刷新页面,即可看到效果

webpack 方式使用

第一步,安装

  npm install tctip --save

第二步,引入包

  import tctip from 'tctip'

第三步,传参使用,类似web方式

  new tctip(config).init()

参数说明

  • top

    • 类型: String
    • 默认值: 10%
    • 含义: 插件顶端距离页面最上面的距离
    • 备注: 格式如 100px或者10%
  • button

    • 类型: Object,包含idtype两个子数组
    • id:
      • 类型: Number
      • 默认值: 1
      • 含义: 代表图片颜色
      • 备注: 取值范围为1-9
    • type:
      • 类型: String
      • 默认值: dashang
      • 含义: 按钮上的汉字,有打赏赞助两种
      • 备注: 只能取dashang或者zanzhu
  • list

    • 类型: Array
    • 默认值: []
    • 含义: 重点配置,右侧打赏显示,不能为空
    • 备注: 一个数组,最多传入五个元素,每个元素又有如下几项陪配置
    • type:
      • 类型: String
      • 默认值: 无
      • 含义: 打赏类型
      • 备注: 系统自带四种默认type,alipay,wechat,bitcon,tenpay,如果不是这四种,可以随意写
    • qrImg:
      • 类型: String
      • 默认值: 无
      • 含义: 二维码图片地址
      • 备注: 尽量裁剪图片周边的空白。重要但是非必传
    • qrContent:
      • 类型: String
      • 默认值: 无
      • 含义: 二维码内容
      • 备注: 和qrImg二者必须传一个。如果传入本参数,插件自动生成二维码
    • icon:
      • 类型: String
      • 默认值: 无
      • 含义: 图标,列入支付宝图标
      • 备注: 当type为系统默认四种之一时,本参数可省略
    • name:
      • 类型: String
      • 默认值: 无
      • 含义: 支付名称,例如支付宝、微信等
      • 备注: 当type为系统默认四种之一时,本参数可省略
    • desc:
      • 类型: String
      • 默认值: 无
      • 含义: 二维码下面的一句短语,类似大爷行行好之类的
      • 备注: 当type为系统默认四种之一时,本参数可省略
  • stat

    • 类型: Boolean
    • 默认值: true
    • 含义: 是否上报,用于作者统计使用者
    • 备注: 本参数只是方便作者统计插件使用情况,可视情况关闭

技术栈

  • webpack
  • qrcode
  • es6
  • 其他技术

感谢与参考

案例收集

您可以点此填写,我会定期整理
您也可以直接clone项目,提交PR
下面是部分使用的网站,排序方式为随机,筛选标准为网站和文章质量
本名单随时更改,可能添加,也可能移除

独立网站

cnblogs 博客

网友修改后使用版本(PS,欢迎PR)

qq群

  • qq群号:188087193
  • 验证消息: github

改进与完善

欢迎提issue,欢迎PR