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

项目名称

《豆子商城》

项目定位

  • 个人学习项目

项目周期

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

部分项目截图

[前端项目]微信小程序 小商城_第1张图片

image-20210414225101736

[前端项目]微信小程序 小商城_第2张图片

image-20210415132628595

[前端项目]微信小程序 小商城_第3张图片

image-20210415132555712

[前端项目]微信小程序 小商城_第4张图片

image-20210415132647364

vscode插件

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

  • minapp

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

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

参考资料

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

你可能感兴趣的:(前端,小程序,js,移动开发)