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

posted @ 2021-02-06 20:47 時光心向阳阅读(360) 评论(0) 编辑收藏举报

刷新页面返回顶部