打赏插件tctip使用方法

tctip是什么

tctip是一个js插件，作用是在web网页右侧生成一个打赏浮动窗

官方文档:https://github.com/greedying/tctip

插件效果

效果演示：http://greedying.com/tctip/

效果截图

准备工作

使用此插件需要您的微信收款码和支付宝收款码的网页url。

保存本地图片

保存微信收款码：微信 => 右上角+号 => 收付款 => 二维码收款 => 保存二维码

保存支付宝收款码：支付宝 => 付钱/收钱 => 收钱 => 保存收钱码

生成收款码的网页url

我们的目的是拿到收款码的网页url,原则上将这两张图片上传到任意的网站然后复制图片的链接即可。我们以博客园为例。

方法一

你可以建一个新随笔，将这两种图片上传到博客园生成url。

使用markdown编辑器，在编辑页面点击右边的图片按钮上传本地图片

这样我们就拿到收款码的网页url了。

方法二

你还可以将图片上传到自己博客园相册中，在图片上右键复制图片地址即可。

当然，你还可以上传到博客园的文件中，但不支持上传常见的png,jpg图片格式，仅支持.bpm图片格式格式，还需要对图片进行格式转换，这里不做过多介绍。

使用方法

第一步，引入js

 <script src="https://blog-static.cnblogs.com/files/an-shiguang/tctip-1.0.3.min.js"></script>

这里直接引用了保存在我博客园内的js文件，官方文档里说可以直接使用他们提供的静态链接http(s)://static.tctip.com/tctip-1.0.4.min.js，但是我试了并没有成功，所以我才将tctip-1.0.3.min.js

下载下来保存到博客园中直接引用，注意，这里我使用的是1.0.3版本而非最新的1.0.4版本，因为我之前试了很多次最新版本都失败了，将版本降低到1.0.3才成功。

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

<script>
   new tctip({
    top: '20%',
    button: {
      id: 9,
      type: 'dashang',
    },
    list: [
      {
        type: 'alipay',
        qrImg: 'https://img2020.cnblogs.com/blog/2233039/202102/2233039-20210206194918144-1753886908.jpg'
      }, {
        type: 'wechat',
        qrImg: 'https://img2020.cnblogs.com/blog/2233039/202102/2233039-20210206194905014-1211368553.png'
      }, {
        type: 'bitcoin',
        qrContent: ''
      }
    ]
  }).init()
</script>

将代码中的qrImg替换为自己收款码的网页url即可，type为alipay的是支付宝打赏，type为wechat的是微信打赏，type为bitcoin的是比特币打赏。

复制以上两段代码粘贴到 博客园 => 管理 => 设置中的 博客侧边栏公告（需要支持js权限） 或者 页首 HTML 代码 或者 页脚 HTML 代码任意位置都可以。最后保存刷新就可以查看效果了。

参数说明

• 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为系统默认四种之一时，本参数可省略