打赏插件tctip使用方法

两行代码实现博客园打赏功能

也许大家看博客园博客的时候，遇到过一些博客右侧，展示了打赏二维码~
如下图所示

那么，这是怎么实现的呢~~~

不错，你没猜错，他们使用的是本人写的一个js插件--tctip。

大家搜一下，还能搜到网上有些tctip的教程。比如下面两个链接

http://www.cnblogs.com/softidea/p/5862961.html
http://www.cnblogs.com/wuql/p/6144791.html

不过以上两个链接，介绍的都是老版的tctip使用，使用方法较为老套繁琐。

这里，我要介绍的是tctip v1.0.0的使用方法，全世界第一篇，因为昨天晚上本人刚发布这个新版本(^o)/~

相比于老版吗，新版做了以下事情

• 简化了参数配置，大家不用按照老版的教程那样，配置图片链接、css路径啥的了。当然，收款二维码还是需要滴
• 使用webpack+ES6等较新的方式完全重写代码，让代码更优美。可作为webpack+ES6入门示范使用

注意，新版本简化了使用方式，不兼容老版本，如需要升级到新版本，请修改您的配置参数

第一步，申请博客园js权限。

这一步大家可以参考前面别人的教程，或者点击这里。注意，只看申请js部分，后面tctip部分不要看，老版已经不维护了

第二步，获取微信和支付宝二维码图片，并上传到合适的地方，保存地址。

这里其实是支持各种各样的打赏方式的，包括比特币，甚至什么没听过的方式。但是根据统计，大多数人都是放一个支付宝，放一个二维码，这也符合大家的印象。
所以这里我就直接说支付宝和微信了。
上传图片，大家自行解决，包括博客园也是可以上传的，不再赘述

第三步， 复制并修改下面的代码

  <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>

上面的代码，相信读这篇文章的人都懂，就是引入js，然后配置。
当然，大家也可以到我的github下载tctip-1.0.0.min.js，并上传到自己的服务器上使用。

第四步，粘贴代码

找到“我的博客”->“管理”->“设置”，将页面往下拉，找到“页首Html代码”这个位置，将修改好的代码复制进去，保存

第五步，感谢作者

是的，到这里你应该已经可以看到自己博客上的二维码了。
我个人之后会申请博客园的js权限，申请后自己也用一下这个插件，合合

请注意，作者五行缺钱，如果本文对你有用的话，欢迎扫描二维码打赏作者。

当然，你也可以fork、star、PR作者的项目, tctip

欢迎查询本人博客，这里的文章一般都是我个人博客的复制，点此查看

 

出处：https://www.cnblogs.com/greedying/p/6483222.html

=======================================================================================

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

 

 

出处：https://www.cnblogs.com/an-shiguang/p/14382903.html