前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >[个人网站搭建]·极简方式实现打赏功能

[个人网站搭建]·极简方式实现打赏功能

作者头像
小宋是呢
发布2019-06-27 14:57:46
1.9K0
发布2019-06-27 14:57:46
举报
文章被收录于专栏:深度应用

[个人网站搭建]·极简方式实现打赏功能

可以查看我的个人主页,参看效果--> http://www.yansongsong.cn/ 个人网站搭建github地址:https://github.com/xiaosongshine/djangoWebs

在个人网站博客中,打赏赞助是对作者的一种支持与鼓励,是很常见的功能。本文将分享一种非常简单的方式,来实现打赏功能。

实践展示:

1.PC端:

2.移动端

功能实现

功能实现十分简单,不需要再单独引入外部CSS与JS,只需要将一下HTML代码加入的你的网页里:

代码语言:javascript
复制
<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,包含idtype两个子数组
    • 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
    • 含义: 是否上报,用于作者统计使用者
    • 备注: 本参数只是方便作者统计插件使用情况,可视情况关闭

欢迎大家访问我的主页尝试一下,觉得有用的话,麻烦小小鼓励一下 ><

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年03月28日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • [个人网站搭建]·极简方式实现打赏功能
    • 实践展示:
      • 功能实现
        • 参数说明
        相关产品与服务
        网站建设
        网站建设(Website Design Service,WDS),是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务,无需了解代码技术,即可自由拖拽模块,可视化完成网站管理。全功能管理后台操作方便,一次更新,数据多端同步,省时省心。使用网站建设服务,您无需维持技术和设计师团队,即可快速实现网站上线,达到企业数字化转型的目的。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档