简介
本快速示例是一个模仿“支付宝信用卡还款功能” 的简易小程序,简化信用卡还款流程,只囊括了最主要的还款流程:用户查看信用卡列表,前往看信用卡详情,输入还款金额,操作还款,查看还款结果。
快速示例提供了支付宝小程序在某些场景下的官方解决方案,提供了开发源码,开发者可以以此作为参考,也可以直接在源码的基础上进一步开发。
本示例解决的是小程序支付宝信用卡还款。如下 Herbox 是运行本示例源码的效果,可以点击下方界面右上角的 下载 按钮下载源码,或点击文档右上角链接获取源码。
使用说明
- 本示例为纯客户端代码,无需配置后端代码,可直接在模拟器和在真机预览。
- 需完成 开发者入驻 与 小程序创建 。
- 下载并安装小程序开发者工具(IDE)(点此下载)。
- 更多详细信息可参见 代码市场。
使用
使用步骤
- 打开 IDE。
- 在 IDE 界面新建或打开项目:
- 通过界面 小程序 > 添加项目 > 选择端(可多选) > 选择模板 > 找到本示例对应的模板点击 下一步 > 配置项目名称和路径 > 点击完成。
- 点击 打开项目 按钮,进入本文开头下载的源码包所在路径,将源码包解压到一个文件夹里,选择文件夹打开。
- 进入项目后,登录开发者账号,并关联已有 APPID。
- 完成以上步骤后,可以通过 IDE 进行开发和调试。
页面内容定义
本项目共包含 3 个示例页面,分别是:还款列表页、还款详情页、还款结果页。
1. 还款列表页
文件路径:pages/card-home
还款列表页是小程序的首页,展示了近七日已知待还总金额和信用卡列表,列表内包含信用发卡银行、尾号信息、还款时间及金额数目等信息。
2. 还款详情页
文件路径:pages/card-detail
还款详情页展示了还款时单个具体信用卡的还款信息:发卡银行、尾号、未还金额、到期还款日、还款金额等。用户还可以在此页面内输入金额并操作还款。
3. 还款结果页
文件路径:pages/repayment-result
还款结果页呈现了付款成功后,返回给用户的界面提示。
自定义 UI 组件
本项目共包括 4 个自定义 UI 组件,分别是:聚合还款总金额、信用卡头部信息、还款金额输入框、还款结果状态步骤。
1. 聚合还款总金额
文件路径:components/flip-numbers
聚合还款总金额 flip-number 组件用于在还款列表页复用,主要实现以下功能:
- 解析传入的还款总金额数目, 将数字分离成单个字符,用于生成数字阵列
- 将数字矩阵的各数字位初始化为 0,再赋值,获得滚动效果。
2. 信用卡头部信息
文件路径:components/header-info
信用卡头部信息 header-info 组件用于在还款详情页复用,展示不同信用卡的详情,包含发卡银行信息、持卡人信息等。
3. 还款金额输入框
文件路径:components/pay-input
还款金额输入框 pay-input 组件用于在还款详情页复用,提供还款时输入金额的操作。
4. 还款结果状态步骤
文件路径:components/steps
还款结果状态步骤 step 组件用于在还款结果页复用,提示信用卡还款的当前所处状态及接下来的状态。
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 支付宝信用卡还款小程序模板源码