为你的博客一键添加打赏功能

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

随着移动支付在国内的兴起，越来越多的付费内容越多如雨后春笋般的冒了出来。其中以《逻辑思维》、罗振宇、李笑来为主要代表作品和人物。可以说是时候在自己的博客上添加打赏功能了。那么对于不会写代码的如何快速的一键添加打赏功能呢？下面为大家介绍一款插件，支持博客园，CSDN博客，WordPress个人站点等。

运行效果可以到 CODE大全 进行查看！我这里附上打赏截图效果！

使用方法如下：

<script>
	window.tctipConfig = {
		//图片路径前缀，用来修订图片相对路径,默认为""
		imagePrefix:  "",
		//css路径前缀，用来修订css相对路径,默认为""
		cssPrefix:	  "",
		/**
		静态文件相对路径。当staticPrefix存在的时候,
		优先使用staticPrefix,此时imagePrefix和cssPrefix失效
		推荐使用下面的staticPrefix，此时将使用作者服务器的静态资源，使用者不需要下载图片和css资源到自己服务器
		**/
		staticPrefix: "http://static.tctip.com",

		/***
		左侧分享按钮的id,使用的图片为 tab_id.png
		这里为了展示效果，随机选择一张图片
		请实际使用的时候，选择适合的颜色，例如
		buttonImageId: 3,
		**/
		buttonImageId: Math.ceil(Math.random()*8) + 1,

		/****
		左侧按钮上的文字，目前有两个选项，打赏，或者赞助,传入拼音即可
		**/
		buttonTip:	"dashang", //或者 zanzhu

		/****
		list规定打赏的方式，list有几个元素，代表有几种打赏方式,最多五种，用户传入的支付方式多于五种，多出部分将会被忽略
		一个完整的list元素例子如下
		'key'    :   {icon: "img/alipay.png", name:"支付宝", desc: "支付宝打赏", className: "", qrimg: "", account:""},

		分别解释如下:

		key:
				为一个英文下标,用户可随意定义;key有六种默认值，分别为 alipay, tenpay, weixin, bitcoin,litecoin,dogecoin,当key为默认值
				的时候，插件默认规定了icon, name,desc的默认值;

		icon:	
				左侧icon图标的url,可以传入相对路径，此时会根据imagePrefix或者staticPrefix进行路径修正。
				如果传入绝对路径，则直接展示，不进行路径修正。
				如果key是默认值，且用户没有传入icon,则使用系统自带icon。
		name:	
				支付方式的名称，用于左侧tab展示的说明。name可以使用系统默认值；如果没有系统默认值，则需要用户传入
		desc:	
				支付方式更纤细说明，用于二维码下方说明文字,建议不超过五个字。当desc为空的时候，系统使用默认值，如果没有默认值，则使用name字段

		account:
				支付方式账号,例如支付宝账号或者比特币地址等。用于生成二维码,并同时在二维码下方的desc之下以文字形式展示,方便打赏的人直接复制账号而非以二维码形式打赏; 
				account没有系统默认值
		qrimg:	
				当用户没有支付方式账号的时候，可以直接传入二维码图片；比如用户可以上传微信面对面收钱的二维码图片到服务器，然后将图片的url作为qrimg字段传入。此时二维码下方只展示desc字段，不展示account. 
				当用户同时传入qrimg和accounts时候，以qrimg为准。

		className:
				className可以为空，或者传入myR-on；当用户传入myR-on的时候，右侧二维码默认展示当前支付方式；否则默认展示第一种支付方式。
	**/
		list:{

			/**使用系统默认支付方式，传入account**/
			bitcoin: { account: "1PhQySHF1ZuoRwoZ8G4CDLEtE6fAnD3GJP"},
			/**使用系统默认支付方式，传入的qrimg为支付宝收款二维码**/
			alipay: { qrimg: "http://tctip.com/img/alipayqr.png"},
			/**使用系统默认支付方式，传入qrimg**/
			weixin:{qrimg: "http://littlebtc.com/images/yeshen.png"},
			/**使用自定义支付方式，传入account,并默认展示**/
			tenpay: { account: "342285717", className:"myR-on"},
			/**使用自定义支付方式，传入icon,name,account**/
			another:{icon: "img/litecoin.png", name: "莱特币", className: "", account: "LVCSBrv3ikzZWDtm9v8QPvDvLwn7dcsCEa", desc: "自定义莱特币"}
		}
	};
</script>
<script src="js/tctip.min.js"></script>

源码下载地址：《分享一款打赏插件》

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » 为你的博客一键添加打赏功能