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

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

需求分析及开发前准备


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


一、需求分析


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


1.1 技术选型


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


TeX\TeXTEX


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


1.2 需求描述


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

ec3a20a93f9e41bf8e40207ca3754fe6_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


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


50d6f6d12e814a7b99bf2968912f7304_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


二、开发前的准备


2.1 创建一个新的小程序


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


2.2 搭建项目目录


ca9d3b3b35b4475d9a81424dc5aa4a60_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


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


  • components目录:主要用来存放一些自定义组件相关的内容。
  • images目录:主要用来存放商城用到的图片信息等。
  • libs目录:主要用来存放商城项目中依赖的第三方库。
  • models目录:主要用来封装与后台进行交互的model操作类。
  • pages目录:主要用来存放商城的各个具体页面。
  • utils目录:主要用来存放商城开发过程中使用到的各种工具类,避免重复代码。
  • app.js: 小程序入口文件。
  • app.json:小程序全局配置文件。
  • app.wxss:小程序公共样式表
    到此位置,准备工作就做好啦,后面我们就可以开始小程序开发啦~


最后


参考资料:小程序开发原理与实战

⚽本文介绍了开发商城类小程序的需求分析和准备工作~

⚾如果这篇文章对你有帮助的话,麻烦点赞收藏哟~

相关文章
|
23天前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
4天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
17天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
22天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
28天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
28天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
18天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
30天前
|
数据采集 人工智能 小程序
【一步步开发AI运动小程序】十、姿态动作相似度比较
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,重点讲解姿态动作相似度比较功能的运用,包括样本动作帧的采集和姿态相似度的计算方法,以及在组合运动中的应用实例。
|
24天前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。
|
29天前
|
人工智能 小程序 开发者
【一步步开发AI运动小程序】十一、人体关键点跳跃追踪
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,涵盖云上运动会、健身打卡等热门应用场景。通过示例代码展示如何调用插件功能,实现动作追踪与分析,助力开发者快速上手。