[个人网站搭建]·极简方式实现打赏功能

在个人网站博客中,打赏赞助是对作者的一种支持与鼓励,是很常见的功能。本文将分享一种非常简单的方式,来实现打赏功能。

小宋是呢


[个人网站搭建]·极简方式实现打赏功能

可以查看我的个人主页,参看效果--> https://xiaosongshine.github.io/ 

在个人网站博客中,打赏赞助是对作者的一种支持与鼓励,是很常见的功能。本文将分享一种非常简单的方式,来实现打赏功能。

实践展示:

1.PC端:


2.移动端

功能实现

功能实现十分简单,不需要再单独引入外部CSS与JS,只需要将一下HTML代码加入的你的网页里:

<script src="http://static.tctip.com/tctip-1.0.0.min.js"></script>
  <script>  
  new tctip({
    top: '20%',
    button: {
      id: 9,
      type: 'dashang',
    },
    list: [
      {
        type: 'alipay',
        qrImg: '你的支付宝收款二维码图片地址'
      }, {
        type: 'wechat',
        qrImg: '你的微信收款二维码图片地址'
      }
    ]
  }).init()
  </script>

参数说明

  • top

    • 类型: String

    • 默认值10%

    • 含义: 插件顶端距离页面最上面的距离

    • 备注: 格式如 100px或者10%

  • button

    • 类型: String

    • 默认值dashang

    • 含义: 按钮上的汉字,有打赏赞助两种

    • 备注: 只能取dashang或者zanzhu

    • 类型: Number

    • 默认值1

    • 含义: 代表图片颜色

    • 备注: 取值范围为1-9

    • 类型: Object,包含idtype两个子数组

    • id:

    • type:

  • list

    • 类型: String

    • 默认值: 无

    • 含义: 二维码下面的一句短语,类似大爷行行好之类的

    • 备注: 当type为系统默认四种之一时,本参数可省略

    • 类型: String

    • 默认值: 无

    • 含义: 支付名称,例如支付宝、微信等

    • 备注: 当type为系统默认四种之一时,本参数可省略

    • 类型: String

    • 默认值: 无

    • 含义: 图标,列入支付宝图标

    • 备注: 当type为系统默认四种之一时,本参数可省略

    • 类型: String

    • 默认值: 无

    • 含义: 二维码内容

    • 备注: 和qrImg二者必须传一个。如果传入本参数,插件自动生成二维码

    • 类型: String

    • 默认值: 无

    • 含义: 二维码图片地址

    • 备注: 尽量裁剪图片周边的空白。重要但是非必传

    • 类型: String

    • 默认值: 无

    • 含义: 打赏类型

    • 备注: 系统自带四种默认type,alipay,wechat,bitcon,tenpay,如果不是这四种,可以随意写

    • 类型: Array

    • 默认值: []

    • 含义: 重点配置,右侧打赏显示,不能为空

    • 备注: 一个数组,最多传入五个元素,每个元素又有如下几项陪配置

    • type:

    • qrImg:

    • qrContent:

    • icon:

    • name:

    • desc:

  • stat

    • 类型: Boolean

    • 默认值: true

    • 含义: 是否上报,用于作者统计使用者

    • 备注: 本参数只是方便作者统计插件使用情况,可视情况关闭


欢迎大家访问我的主页尝试一下,觉得有用的话,麻烦小小鼓励一下 ><


评论列表

暂无评论

新的评论

上一篇:
下一篇: