小程序项目 - 电商优购

2021-01-03 594 阅读8分钟

1-:uni-app和项目搭建

`项目介绍`

`项目文档`

`了解什么是uni-app`

`下载和安装HBuilderX`

`安装scss编译的插件`

`对HBuilderX进行个性化的配置`

`创建uni-app项目`

`了解uni-app项目的目录结构`

`把项目运行到微信开发者工具`

`配置checkSiteMap选项`

`使用Git本地管理uni-app项目`

`把本地项目托管到码云`

`创建tabBar对应的4个页面`

`配置tabBar效果`

`配置导航条的样式效果`

`分支的合并与提交`

2-: 首页功能实现

`轮播图 - 创建home子分支`

`安装并配置网络请求的第三方包`

`请求轮播图的数据`

`渲染轮播图的UI结构`

`配置小程序的分包`

`点击轮播图跳转到商品详情页面`

`封装uni.$showMsg()方法`

`分类导航 - 获取分类导航的数据`

`渲染分类导航的UI结构`

`切换到分类页面`

`楼层区域 - 获取楼层的数据`

`渲染楼层的标题`

`渲染楼层左侧的大图片`

`渲染楼层右侧的小图片`

`楼层区域 - 点击楼层图片跳转到商品列表页面`

`分支的合并与提交`

3-: 分类页面功能实现

`创建cate分支以及分类页面的编译模式`

`实现分类页面滑动区域的左右布局`

`动态设置scroll-view组件的高度`

`美化左侧scroll-view中item项的样式`

`获取分类列表的数据`

`动态渲染左侧的一级分类列表`

`定义二级分类的数据列表`

`动态渲染右侧的二级分类列表`

`动态渲染右侧的三级分类列表`

`切换一级分类后重置滚动条的位置`

`点击三级分类跳转到商品列表页面`

`分支的合并与提交`

4-: 自定义搜索组件

`介绍搜索相关的功能`

`创建search分支`

`在uni-app项目中新建自定义的搜索组件`

`渲染my-search组件的基本结构`

`解决cate分类页面scroll-view高度的问题`

`通过自定义属性增强组件的通用性`

`为自定义组件封装click事件`

`点击cate页面的搜索组件导航到搜索页面`

`实现首页搜索组件的吸顶效果`

5-: 搜索建议和搜索历史功能实现

`渲染搜索页面的基本结构`

`实现搜索框自动获取焦点`

`实现搜索框的防抖处理`

`根据关键词查询搜索建议列表`

`循环渲染搜索建议列表的UI结构`

`美化搜索建议列表的UI结构`

`点击搜索Item项导航到商品详情页`

`渲染搜索历史记录的基本结构`

`美化搜索历史区域的UI结构`

`实现搜索建议和搜索历史的按需展示`

`将搜索关键词存入historyList`

`解决关键词前后顺序的问题`

`解决关键词重复的问题`

`将搜索历史记录持久化存储到本地`

`清空搜索历史记录`

`点击搜索历史跳转到商品列表页面`

`分支的合并与提交`

6-: 商品列表功能实现

`介绍商品列表页面的功能并创建编译模式`

`创建goodslist分支`

`定义请求参数对象`

`获取商品列表数据`

`定义商品列表页面的UI结构`

`美化商品列表页面的UI结构`

`把商品Item项封装为自定义组件`

`使用过滤器处理商品价格`

`初步实现上拉加载更多`

`使用节流阀防止发起额外的数据请求`

`判断数据是否加载完毕`

`实现下拉刷新的效果`

`点击商品item项导航到商品详情页面`

`分支的合并与提交`

7-: 商品详情功能实现

`创建goodsdetail分支`

`添加商品详情页的编译模式`

`获取商品详情的数据`

`渲染轮播图区域`

`实现轮播图的大图预览效果`

`渲染商品信息区域的UI结构`

`美化商品信息区域的样式`

`使用rich-text组件渲染HTML内容`

`解决商品图文详情中图片底部空白间隙的问题`

`解决webp格式的图片在ios设备上无法正常显示的问题`

`解决商品价格闪烁的问题`

`渲染商品导航区域的UI结构`

`自定义商品导航区域的按钮信息`

`点击购物车按钮导航到购物车页面`

`分支的合并与提交`

8-: 加入购物车功能实现

`创建cart分支`

`配置vuex`

`创建购物车的store模块`

`在商品详情页中使用store中的数据`

`在mutations中定义addToCart方法`

`实现加入购物车的功能`

`动态统计购物车中商品的总数量`

`持久化存储购物车中的商品`

`优化商品详情页的total侦听器`

`动态为tabBar设置数字徽标`

`将设置tabBar徽标的代码抽离为mixins`

9-: 购物车页面-商品列表功能实现

`演示购物车页面要实现的功能`

`创建购物车页面的编译模式`

`商品列表区域 - 渲染商品列表的标题区域`

`渲染商品列表区域的基本结构`

`goods组件封装radio勾选状态`

`通过props属性控制radio的按需展示`

`动态绑定radio组件的值`

`介绍为my-goods组件封装radio-change事件的实现思路`

`为my-goods组件封装radio-change自定义事件`

`修改购物车中商品的勾选状态`

`为my-goods组件封装NumberBox`

`通过props属性控制NumberBox的按需展示`

`介绍为my-goods组件封装num-change事件的实现思路`

`为my-goods组件封装num-change事件`

`解决NumberBox组件数据不合法的问题`

`完善NumberBox的inputValue侦听器`

`修改购物车中商品的数量`

`渲染滑动删除的UI效果`

`实现滑动删除的功能`

10-: 购物车页面-收货地址功能实现

`创建my-address收货地址组件`

`渲染收货地址组件的UI结构 - 上`

`渲染收货地址组件的UI结构 - 下`

`实现收货地址区域的按需展示`

`实现选择收货地址的功能`

`渲染收货人的信息`

`在vuex中定义用户相关的m_user模块`

`将address信息存储到vuex中`

`将vuex中的address持久化存储到本地`

`将addstr抽离为getters`

`重新选择收货地址`

`演示取消授权时的问题`

`判断用户是否授权`

`提示用户重新进行授权`

`调用openSetting方法实现重新授权`

`解决iPhone真机上无法重新授权的问题`

11-: 购物车页面-结算功能实现

`把结算区域封装为独立的组件`

`渲染结算区域的结构和样式`

`动态渲染已勾选商品的总数量`

`动态渲染全选按钮的选中状态`

`使用数组的reduce方法改造total的计算方式`

`实现商品的全选与反选功能`

`动态渲染已勾选商品的总价格`

`动态计算tabBar中购物车徽标的值`

`渲染购物车为空时候的页面结构`

`分支的合并与提交`

12-: 登录功能实现

`创建settle分支`

`点击结算按钮进行条件判断`

`登录 - 定义my页面的编译模式`

`实现登录组件和用户信息组件的按需展示`

`初步渲染登录组件的基本结构`

`美化登录组件的样式`

`绘制登录盒子底部的半椭圆造型`

`分析登录功能的实现思路`

`点击登录按钮获取微信用户的基本信息`

`处理用户取消登录授权的情况`

`将用户的基本信息存储到vuex`

`调用uni.login获取code对应的值`

`进一步完善uni.login调用失败之后的if判断条件`

`登录获取Token字符串`

`将Token存储到vuex中`

13-: 用户信息和自动跳转功能实现

`用户信息 - 实现用户头像、昵称区域的基本布局`

`渲染用户的头像和昵称`

`渲染第1个面板的UI结构`

`美化第1个面板的样式`

`渲染第2个面板区域`

`渲染第3个面板区域`

`实现退出登录的功能`

`三秒后自动跳转 - 实现倒计时提示的功能`

`控制秒数的边界并自动跳转到登录页面`

`解决seconds不会被重置的问题`

`将返回页的信息对象记录到vuex中`

`根据redirectInfo导航到登录之前的页面`

14-: 微信支付功能和小程序项目发布

`在请求头中添加Token身份认证的字段`

`了解微信支付的流程`

`创建订单`

`订单预支付`

`实现微信支付`

`分支的合并与提交`

`为什么要进行发布`

`了解将uni-app项目发布为小程序的基本流程`

`演示将uni-app项目发布为小程序的流程`

`了解将uni-app项目发布为Android App的基本流程`

`演示将uni-app项目发布为Android App的流程`

项目源代码地址 - 感兴趣的可以下载，结合博客一步步实现该项目！