用js实现博客打赏功能

<script>
window.tctipConfig = {
    staticPrefix:  "http://static.tctip.com",
    buttonImageId: 1,
    buttonTip: "zanzhu",
    list:{
      alipay: {qrimg: "http://tctip.com/img/alipayqr.png"},
      weixin:{qrimg: "http://littlebtc.com/images/yeshen.png"},
    }
};
</script>
<script src="/UploadFiles/2021-04-02/tctip.min.js">

其中比较重要的是配置有staticPrefix，是原作者自己提供的静态文件相对路径，用来存放img和css；list是打赏方式，qrimg是设置打赏方式的二维码图片。
接下来是在博客园中使用。先在本地准备好静态文件：
　　JS文件，tctip.min.js；
　　css样式文件，myReward.css；
　　支付二维码，ialipay.bmp、iweixin.bmp；
　　支付方式图片，alipay.bmp、weixin.bmp；
　　赞助或者打赏按钮图片，tab_4.bmp（对应buttonImageId）。
博客园只能上传bmp图片，所以要将其他格式图片修改，然后在自己的博客园后台上传文件，这样前面的静态文件就可以使用刚刚上传了。


如果使用自己上传的静态文件，配置时就不要staticPrefix地址，提供imagePrefix和cssPrefix：




<script>
  window.tctipConfig = {
    imagePrefix: "图片文件的相对路径",
    cssPrefix:   "样式文件的相对路径",
    //staticPrefix: "http://static.tctip.com",
    buttonImageId: 4,
    buttonTip:  "dashang",
    list:{
      alipay: { qrimg: "支付宝二维码绝对路径"},
      weixin: { qrimg: "微信二维码绝对路径"},
    }};
</script>
<script src="/UploadFiles/2021-04-02/js文件绝对路径">

当然如果只是这样就完了，还是没有看作者的源JS代码，事实是不修改一下源码也无法使用的，其实主要是文件路径设置的问题。


打开JS源码，不是压缩的源码哦，除非你看的不眼花，也没人拦你的。




myConfig : {
    imagePrefix  : "",
    cssPrefix    : "",
    /***
     * 当staticPrefix不为空的时候,imagePrefix和cssPrefix失效
     */
    staticPrefix  : "",
    buttonImageId  : "3",
    buttonTip    : "dashang",
    cssUrl:  "/myRewards.css"
  },


原来的cssUrl是/css/myRewards.css，因为博客园上传的文件没有文件夹，所以去掉css。可能大家想到了，img也有一样的问题。




listConfig:{
        'alipay'  :   {icon: "alipay.bmp", name:"支付宝", desc: "支付宝打赏", className: ""},
        'tenpay'  :   {icon: "img/tenpay.png", name:"财付通", desc: "财付通打赏", className:""},
        'weixin'  :   {icon: "weixin.bmp", name:"微信", desc: "微信打赏", className:""},
        'bitcoin'  :  {icon: "img/bitcoin.png", name:"比特币", desc: "比特币打赏", className:""},
        'litecoin'  :  {icon: "img/litecoin.png", name:"莱特币", desc: "莱特币打赏",className:""},
        'dogecoin'  :  {icon: "img/dogecoin.png", name:"狗狗币", desc: "狗狗币打赏", className:""}
      },


支付方式列表中，修改图片相对路径，由于只使用了支付宝、微信两种方式，所以只修改他们的路径。其实还可以添加其他的支付方式在这里，就不赘述了。




buttonImageUrl: function(){
            var id = tctip.myConfig.buttonImageId;
            var tip = tctip.myConfig.buttonTip;
            //return tctip.imageUrl("" + tip + "/tab_" + id + ".bmp");
            return tctip.imageUrl("/tab_4.bmp");
        },


支付按钮的图片路径，同样修改返回的相对路径。
这样在博客园后台的设置页面，在页首Html处添加上面的配置文件就可以了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。