支付宝小程序 行业·优惠加油小程序模板
- 支付宝加油模板是一个提供油站查询、油站导航、在线优惠支付、订单查询等多功能的在线加油服务。
使用说明
- 本示例为纯客户端代码，可直接在模拟器和在真机预览 。
- 部分页面暂不支持调试，如遇此类不支持页面，请在 web IDE > 模拟器 > 页面路径，切换页面使用。
- 更多详细信息可参见 代码市场。
前提条件
使用步骤
- 下载 文件包 。
- 打开 IDE 相关的内容目录，关联已有 APPID。
- 通过 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
可展示油站详情信息并具备导航功能。
