支付寶小程序 行業(yè)·優(yōu)惠加油小程序模板

• 支付寶加油模板是一個(gè)提供油站查詢(xún)、油站導(dǎo)航、在線優(yōu)惠支付、訂單查詢(xún)等多功能的在線加油服務(wù)。

使用說(shuō)明

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

前提條件

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

使用步驟 ??

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

頁(yè)面內(nèi)容

本項(xiàng)目包括的頁(yè)面數(shù)量為四個(gè)，分別是：首頁(yè)、個(gè)人中心頁(yè)面、搜索頁(yè)、訂單確認(rèn)頁(yè)。

1. 首頁(yè)

頁(yè)面路徑：pages/index

• 地圖及地圖油站列表展示
• 油站詳情展示
• 油站導(dǎo)航

2. 個(gè)人中心頁(yè)面

頁(yè)面路徑：pages/person-center

• 展示用戶(hù)歷史加油訂單詳情

3. 搜索頁(yè)

頁(yè)面路徑：pages/search

• 搜索全國(guó)各個(gè)地點(diǎn) POI
• 搜索歷史記錄

4. 訂單確認(rèn)頁(yè)

頁(yè)面路徑：pages/settle-order

• 新手引導(dǎo)
• 選擇不同的油品和油槍
• 支付加油金額

自定義 UI 組件

本項(xiàng)目共包含六個(gè)自定義 UI 組件，分別是：新手引導(dǎo)組件、地圖組件、選擇油品種類(lèi)彈窗組件、加油記錄列表組件、金額輸入框 、油站詳情彈窗。

1. 新手引導(dǎo)組件

頁(yè)面路徑：module/fuel-guide

對(duì)新用戶(hù)進(jìn)行操作引導(dǎo)。

2. 地圖組件

頁(yè)面路徑：module/map-ui

包含基礎(chǔ)地圖線路信息與油站圖標(biāo)展示。

3. 選擇油品種類(lèi)彈窗組件

頁(yè)面路徑：module/oil-type-pop

展示并選擇油品種類(lèi)。

4. 加油記錄列表組件

頁(yè)面路徑：module/personal-center-list

可對(duì)適配 UI 的 list 組件再封裝。

5. 金額輸入框

頁(yè)面路徑：module/amount-input

可進(jìn)行加油金額輸入框封裝，校驗(yàn)輸入金額。

6. 油站詳情彈窗

頁(yè)面路徑：module/fuel-station-pop

可展示油站詳情信息并具備導(dǎo)航功能。