[前端项目]微信小程序 小商城

项目名称

《豆子商城》

项目定位

• 个人学习项目

项目周期

2020-11 ~ 2020-12

项目介绍

• 《豆子商城》是我本人个人经过课程学习后开发的个人学习项目。

• 商城模块构成和相应的功能点如下：

• 首页：搜索框（防抖 + 补全）、轮播图、导购入口（flex布局）、五宫格（去浮动）

• 分类：左右布局，左侧为商品分类，右侧为商品牌子（flex布局）

• 商品详情页：轮播图、懒加载、flex布局

• 购物车：storage、购物车item结算（事件代理）

• 个人中心：flex布局、自定义微信登录组件

• 订单页：自定义Tabs组件、slot插槽使用

• 网络请求：async/await + Promise + wx.request自定义重新封装

技术栈

• 架构：前后端分离

• 开发IDE：VScode、微信开发者小程序

• es6语法 +  babel + 原生小程序开发

项目仓库地址

• gitee：https://gitee.com/BruceCat/wechat-app-mail01

部分项目截图

image-20210414225101736

image-20210415132628595

image-20210415132555712

image-20210415132647364

vscode插件

• wechat-snippet 微信小程序代码辅助,代码片段自动完成

• minapp

  微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets） 需要输入<才会触发标签补全，输入空格会触发对应标签的属性补全

• wxapp-helper 选择创建wx组件，自动生成配套的文件

参考资料

https://www.bilibili.com/video/BV1nE41117BQ