支付寶小程序 行業(yè)·公交卡小程序模板

地鐵公交卡快速示例，是支付寶在公交和地鐵場景下總結(jié)沉淀的小程序前端模板，主要包含：乘車權(quán)益首頁、公告通知列表頁、乘車權(quán)益列表、文章詳情頁、資訊列表頁，同時(shí)將支付寶大出行業(yè)務(wù)的 Scheme 拼接樣例總結(jié)到代碼流程中，方便開發(fā)者快速接入。

使用說明

• 本示例為純客戶端代碼，可直接在模擬器和在真機(jī)預(yù)覽。
• 部分頁面暫不支持調(diào)試，如遇此類不支持頁面，請?jiān)?web IDE > 模擬器 > 頁面路徑，切換頁面使用。
• 更多使用詳情請參見 代碼市場。

前提條件

• 完成 開發(fā)者入駐 與 小程序創(chuàng)建。
• 安裝最新版 IDE，點(diǎn)擊下載。

使用步驟

1. 下載 文件包。
2. 打開 IDE 相關(guān)的內(nèi)容目錄，關(guān)聯(lián)已有 APPID。
3. 通過 IDE 真機(jī)預(yù)覽。

頁面內(nèi)容

本項(xiàng)目共包含八個(gè)頁面，分別是：乘車權(quán)益首頁、通知公告列表頁、文章詳情頁、退卡詳情頁面、使用幫助頁面、卡片管理頁面、權(quán)益列表頁面、資訊列表頁。

1. 乘車權(quán)益首頁

頁面路徑：pages/index

• 地鐵公交卡頭圖
• 服務(wù)導(dǎo)航欄
• 乘車權(quán)益欄
• 腰封運(yùn)營位
• 兜底資訊列表

2. 通知公告列表頁

頁面路徑：pages/announcement

• 展示每天的新聞和公告
• 點(diǎn)擊進(jìn)入公告詳情頁面

3. 文章詳情頁

頁面路徑：pages/richText

通過富文本組件直接展示文章內(nèi)容。

4. 退卡詳情頁面

頁面路徑：pages/refundCard

• 退卡流程的申請結(jié)果通知
• 完成行動(dòng)點(diǎn)和撤回申請行動(dòng)點(diǎn)

5. 使用幫助頁面

頁面路徑：pages/useHelper

常見問題列表，點(diǎn)擊后展開問題答案

6. 卡片管理頁面

頁面路徑：pages/cardManage

• 卡片樣式
• 卡號
• 乘車記錄入口
• 公交線路入口
• 使用幫助
• 關(guān)閉服務(wù)

7. 權(quán)益列表頁面

頁面路徑：pages/rightsList

權(quán)益卡片列表展示。

8. 資訊列表頁

頁面路徑：pages/newsList

新聞列表。

框架服務(wù)

本快速示例使用以下框架服務(wù)：

• bus-tinyapp-components
• mini-antui