[个人网站搭建]·极简方式实现打赏功能
可以查看我的个人主页，参看效果--> https://xiaosongshine.github.io/
个人网站搭建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 -
含义: 是否上报，用于作者统计使用者 -
备注: 本参数只是方便作者统计插件使用情况，可视情况关闭
-
欢迎大家访问我的主页尝试一下，觉得有用的话，麻烦小小鼓励一下 ><