随着这两年微搭产品的迭代，目前组件基本够用，像常用的支付这种功能也是有的，因此我们就可以结合现有功能来完成一个实际使用的小程序的开发。

我们本次的实战课，是以加油站的业务场景为出发点，涵盖会员的开通、充值、消费、积分兑换等常用场景。结合实战案例，我们完整的介绍一下IT的常用技能，如需求分析、原型制作、数据源及功能设计、编程技巧等。

通过实战案例的讲解，带着大家从0到1的搭建一款小程序，让零基础的同学也可以循序渐进的学会低码的开发方式。掌握之后，稍微变化一下就可以变成你自己实用的小程序。我们本篇先介绍一下原型图

1 首页

首页主要是一个各类功能的导航入口，我们轮播图可以放置广告，主体功能还是引导用户充值。结合位置信息向用户提示了当前站点距离你的距离，而且可以点击地图进行导航到店。今日价格以表格的形式列出今日的油价。底部菜单可以进行功能的切换。
在这里插入图片描述

2 充值页

充值页显示当前用户的会员卡，并引导用户根据充值金额进行充值，点击其他充值金额进入金额的手动充值页面
在这里插入图片描述

由用户自主决定充值的金额，并完成充值
在这里插入图片描述

付款码可以直接调出会员的支付信息，方便加油站的加油员扫码支付

在这里插入图片描述

积分商城按照积分的段来列出可以兑换的商品，可以自主选购，选购好的商品加入到购物车里，点击购物车可以进入到兑换页面

在这里插入图片描述

在购物车页面完成最终的兑换

在这里插入图片描述

我的页面展示个人信息及会员卡信息，可以修改个人信息，可以查看充值记录及消费记录，也可以绑定车牌

在这里插入图片描述

可以添加自己的车牌信息
在这里插入图片描述

罗列出充值的一个情况
在这里插入图片描述

罗列出消费的记录
在这里插入图片描述

可以修改个人信息
在这里插入图片描述