简单的在线收款码源码-飞翔资源网

温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2023年12月19日，已超过 180天没有更新

特点

纯前端实现，一键部署，无需安装，无需数据库

免维护，无多余配置，一次修改永久使用

代码轻量，数据量小，飞速加载

支付软件智能识别，且允许切换支付方式

用户可对网站样式进行高度自定义

提供徽章生成器和二维码下载，方便使用

优化能够在QQ端显示二维码，具体操作如下：

js/main.js的第22行修改为

img.src = 'https://api.szfx.top/qrcode/?text=' + url;

使用说明

下载源码并解压

修改配置

上传至您的服务器并部署（纯静态，无需 PHP）

Enjoy~

配置项位于 config.js 中，列举如下。

const basic = { // 基础设置
    favicon: 'data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👻</text></svg>', // 页面图标
    title: '(～￣▽￣)～', // 页面标题
    avatar: 'https://gravatar.loli.net/avatar/', // 头像 URL
    name: '这是一个昵称！', // 头像下的昵称
    sign: '个性签名或者提示文字 ( •̀ ω •́ )✧', // 个性签名或提示文字，可使用 HTML 格式
    user_page: 'https://github.com/ghost', // 点击头像或名字时跳转的链接，留空或删除则不跳转
    footer: '这是一个页脚！', // 页脚文字，可使用 HTML 格式
    uri_redirect: false // 若收款码 URL 是网址，是否直接跳转而不显示二维码
}

const theme = { // 主题设置
    page_bg: '#c3d7df', // 网页背景（十六进制，或图片 URL）
    card_bg: '#ffffffcc', // 卡片背景色（十六进制，可带透明度，不能是 URL）
    qrcode_bg: '#eaeffde6', // 二维码背景色（十六进制，可带透明度，不能是 URL）
    qrcode_fg: '#335eea' // 二维码颜色（十六进制，可带透明度，不能是 URL）
}

const tools = { // 右上角小工具设置
    dl_btn: true, // 二维码下载
    badge_generator: true // 徽章生成器
}

const urls = [ // 付款方式列表
    {
        name: '支付宝', // 名称
        ua: 'Alipay', // User-Agent 正则表达式
        addr: 'https://qr.alipay.com/awa' // 收款码 URL
    },
    {
        name: '微信',
        ua: 'MicroMessenger\/',
        img: 'wechat.png' // 使用 img 而非 addr 参数以使用小程序码
    },
    {
        name: 'QQ', 
        ua: 'QQ\/',
        addr: 'https://i.qianbao.qq.com/wallet/sqrcode.htm?awa=awa'
    }
]

源码下载：https://github.com/alex3236/pay