支付宝小程序 行业·优惠加油小程序模板

• 支付宝加油模板是一个提供油站查询、油站导航、在线优惠支付、订单查询等多功能的在线加油服务。

使用说明

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

前提条件

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

使用步骤 

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

页面内容

本项目包括的页面数量为四个，分别是：首页、个人中心页面、搜索页、订单确认页。

1. 首页

页面路径：pages/index

• 地图及地图油站列表展示
• 油站详情展示
• 油站导航

2. 个人中心页面

页面路径：pages/person-center

• 展示用户历史加油订单详情

3. 搜索页

页面路径：pages/search

• 搜索全国各个地点 POI
• 搜索历史记录

4. 订单确认页

页面路径：pages/settle-order

• 新手引导
• 选择不同的油品和油枪
• 支付加油金额

自定义 UI 组件

本项目共包含六个自定义 UI 组件，分别是：新手引导组件、地图组件、选择油品种类弹窗组件、加油记录列表组件、金额输入框 、油站详情弹窗。

1. 新手引导组件

页面路径：module/fuel-guide

对新用户进行操作引导。

2. 地图组件

页面路径：module/map-ui

包含基础地图线路信息与油站图标展示。

3. 选择油品种类弹窗组件

页面路径：module/oil-type-pop

展示并选择油品种类。

4. 加油记录列表组件

页面路径：module/personal-center-list

可对适配 UI 的 list 组件再封装。

5. 金额输入框

页面路径：module/amount-input

可进行加油金额输入框封装，校验输入金额。

6. 油站详情弹窗

页面路径：module/fuel-station-pop

可展示油站详情信息并具备导航功能。