阅读 497
🍁商城类小程序实战(一):需求分析及开发前准备

🍁商城类小程序实战(一):需求分析及开发前准备

这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战

需求分析及开发前准备

这一系列会以商城类小程序为例,详细介绍小程序是如何开发的,从而加深读者对小程序开发流程的理解。

一、需求分析

这个小程序主要向用户展示一些售卖的商品,然后引导用户进行收藏、加入购物车、下单、支付、查看物流、确认收获等操作,形成一个完整的商城交互闭环。

1.1 技术选型

小程序一般由前端和后端两部分组成。前端是大家可以看得见的小程序,包括页面数据的渲染和用户对页面的交互操作。后端主要负责提供数据以及用户操作数据的API。对于商城小程序,往往还需要一个后台管理端,允许对商品(价格、库存),订单(发货、退货)等关键数据进行操作。

TeX\TeX

技术选型上,前端采用原生方案进行开发,后端则采用小程序官方提供的小程序云。小程序云免去了小程序开发中服务器搭建、数据接口实现等繁琐流程。

1.2 需求描述

由于是商城类小程序,项目大体可以分为4个模块:广告模块、商品模块、购物车模块和个人中心模块。

image.png 每个模块根据实际需求我们可以再细分多个模块功能,从而确定页面设计。我们将上述这四个模块设置为4个底部导航栏入口。 image.png

二、开发前的准备

2.1 创建一个新的小程序

此部分不做介绍,读者可自行查阅资料如何创建小程序。

2.2 搭建项目目录

image.png 新建一个Mall(这里为清凉购)作为项目目录。里面包含以下内容:

  • components目录:主要用来存放一些自定义组件相关的内容。

  • images目录:主要用来存放商城用到的图片信息等。

  • libs目录:主要用来存放商城项目中依赖的第三方库。

  • models目录:主要用来封装与后台进行交互的model操作类。

  • pages目录:主要用来存放商城的各个具体页面。

  • utils目录:主要用来存放商城开发过程中使用到的各种工具类,避免重复代码。

  • app.js: 小程序入口文件。

  • app.json:小程序全局配置文件。

  • app.wxss:小程序公共样式表

    到此位置,准备工作就做好啦,后面我们就可以开始小程序开发啦~

最后

参考资料:小程序开发原理与实战
⚽本文介绍了开发商城类小程序的需求分析和准备工作~
⚾如果这篇文章对你有帮助的话,麻烦点赞收藏哟~
🏀GitHub 博客地址: github.com/Awu1227 。
🏉笔者还有其他专栏,欢迎阅读~
🏐玩转CSS之美
🎱Vue从放弃到入门
🎳深入浅出JavaScript