admin 微信小程序项目实例源码
该微信小程序项目使用了 vant ui 组件库，项目页面完整、功能全部有效！ 本项目为小程序前端项目，可以直接导入微信开发者工具中打开，可用于计算机专业的课程设计、毕设项目，也可作为商用小程序的前端页面模板。
1. 核心页面效果图演示 2. 小程序核心页面介绍2.1 首页 在首页中使用了轮播图作为头部 banner 广告，这种做法是很常见的一种首页布局方式，微信小程序中的轮播效果，主要使用的是原生组件的 组件。
在轮播图的下方使用了宫格布局，宫格布局最常见的写法是使用css的栅格，在该项目中的宫格，使用了 vant ui 组件库的 宫格组件。 首页布局中，除了广告位banner、宫格之外，最常见的就是在底部设计猜你喜欢的商品列表，项目中使用了瀑布流布局的竖版商品卡片，这里使用了 flex 弹性盒子布局实现了瀑布流的效果。 2.2 商品分类页 商品分类页面的侧边栏导航使用了 vant ui 中的 组件，右边的二级导航使用了宫格布局，当左边的侧边导航切换时，右边做相应切换即可。 2.3 商品列表页 商品列表页使用了 vant ui 的 下拉菜单组件，实现商品列表的排序和筛选操作，效果如下图。
2.4 购物车页面 购物车页面中存在一些业务逻辑，即有三种状态： 第一种状态，用户未登录，效果如下图。
第二种状态，用户已登录，未添加商品到购物车，效果如下图。
第三种状态，用户已登录，并且已经添加商品到购物车中，效果如下图。
购物车的业务逻辑也在整个项目中也是相对比较复杂的，主要有以下几个功能板块： （1）添加购物车，即购物车数量显示，效果如下图。
（2）购物车商品的单选、全选，以及商品价格自动计算，效果如下图。
（3）购物车商品删除，当前购物车商品卡片点击时为选中/取消选中的效果，因此设计了长按弹出操作按钮的一种特效，可以对购物车商品卡片进行删除操作，效果如下图。
（4）购物车商品提交订单，此功能主要考虑到当前选中了多少个购物车商品，跳转到订单页面时，要对选中的商品进行计算，效果如小图。
订单详情页的总价和购物车页面的总价不同，是因为在订单页还需要累加上运费，订单页的总价是商品总价+运费的总和。
2.5 订单详情页 订单详情页有两个入口，一个是从商品详情页面，直接点击购买按钮，即可进入订单详情页，效果如下图。
另一个入口就是从购物车页面，选择多个商品同时提交订单，进入订单详情页，效果如下图。
2.6 订单列表页 对已经支付过的订单，用户需要在个人中心的订单列表里面查看，效果如下图。
如果当前用户未登录，需要先登录后，才能查看订单列表，效果如下图。
2.7 收货地址 用户在下单时，需要选择自己的收货地址，这就需要让用户提前在个人中心的收货地址管理中，添加自己的信息，效果如下图。
在编辑用户收货地址时，有两个业务逻辑需要处理，一个是表单验证，用户没有填写完整信息时，无法提交；二是全国的省市县区数据，可以使用 vant ui 组件库提供的 area-data 数据插件，实现全国城市信息数据的加载。
