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

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

能够查看个人我的主页，参看效果--> http://www.yansongsong.cn

我的网站搭建github地址：https://github.com/xiaosongshine/djangoWebs 

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

实践展现：

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

  • 类型: Object，包含id和type两个子数组
  • 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
  • 含义: 是否上报，用于做者统计使用者
  • 备注: 本参数只是方便做者统计插件使用状况，可视状况关闭

欢迎你们访问个人主页尝试一下，以为有用的话，麻烦小小鼓励一下 ><