[我的網站搭建]·極簡方式實現打賞功能

[我的網站搭建]·極簡方式實現打賞功能

能夠查看個人我的主頁，參看效果--> 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
  • 含義: 是否上報，用於做者統計使用者
  • 備註: 本參數只是方便做者統計插件使用狀況，可視狀況關閉

歡迎你們訪問個人主頁嘗試一下，以爲有用的話，麻煩小小鼓勵一下 ><