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

2022-09-12 小程序 js 前端移动开发

项目名称《豆子商城》
项目定位

个人学习项目

项目周期 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

推荐阅读

上一篇：微信小程序|UniApp微信小程序登录不同角色动态设置TabBer(多于5个TabBer页面)

下一篇：数学建模|备战数学建模2——MATLAB导入数据，处理缺失值