支付宝小程序 行业·公交卡小程序模板

地铁公交卡快速示例，是支付宝在公交和地铁场景下总结沉淀的小程序前端模板，主要包含：乘车权益首页、公告通知列表页、乘车权益列表、文章详情页、资讯列表页，同时将支付宝大出行业务的 Scheme 拼接样例总结到代码流程中，方便开发者快速接入。

使用说明

• 本示例为纯客户端代码，可直接在模拟器和在真机预览。
• 部分页面暂不支持调试，如遇此类不支持页面，请在 web IDE > 模拟器 > 页面路径，切换页面使用。
• 更多使用详情请参见 代码市场。

前提条件

• 完成 开发者入驻 与 小程序创建。
• 安装最新版 IDE，点击下载。

使用步骤

1. 下载 文件包。
2. 打开 IDE 相关的内容目录，关联已有 APPID。
3. 通过 IDE 真机预览。

页面内容

本项目共包含八个页面，分别是：乘车权益首页、通知公告列表页、文章详情页、退卡详情页面、使用帮助页面、卡片管理页面、权益列表页面、资讯列表页。

1. 乘车权益首页

页面路径：pages/index

• 地铁公交卡头图
• 服务导航栏
• 乘车权益栏
• 腰封运营位
• 兜底资讯列表

2. 通知公告列表页

页面路径：pages/announcement

• 展示每天的新闻和公告
• 点击进入公告详情页面

3. 文章详情页

页面路径：pages/richText

通过富文本组件直接展示文章内容。

4. 退卡详情页面

页面路径：pages/refundCard

• 退卡流程的申请结果通知
• 完成行动点和撤回申请行动点

5. 使用帮助页面

页面路径：pages/useHelper

常见问题列表，点击后展开问题答案

6. 卡片管理页面

页面路径：pages/cardManage

• 卡片样式
• 卡号
• 乘车记录入口
• 公交线路入口
• 使用帮助
• 关闭服务

7. 权益列表页面

页面路径：pages/rightsList

权益卡片列表展示。

8. 资讯列表页

页面路径：pages/newsList

新闻列表。

框架服务

本快速示例使用以下框架服务：

• bus-tinyapp-components
• mini-antui