怎樣使用兩行代碼實現博客園打賞功能

時間 2019-11-06

標籤怎樣使用兩行代碼實現博客功能简体版

原文原文鏈接

也許你們看博客園博客的時候，遇到過一些博客右側，展現了打賞二維碼~
以下圖所示
javascript

那麼，這是怎麼實現的呢~~~css

不錯，你沒猜錯，他們使用的是本人寫的一個js插件--tctip。html

你們搜一下，還能搜到網上有些tctip的教程。好比下面兩個連接java

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

不過以上兩個連接，介紹的都是老版的tctip使用，使用方法較爲老套繁瑣。git

這裏，我要介紹的是tctip v1.0.0的使用方法，全世界第一篇，由於昨天晚上本人剛發佈這個新版本(^o^)/~github

相比於老版嗎，新版作了如下事情web

簡化了參數配置，你們不用按照老版的教程那樣，配置圖片連接、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，並上傳到本身的服務器上使用。