This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

Requirement analysis and development preparation

This series will take the mall class applet as an example, introduce in detail how applet is developed, so as to deepen the reader’s understanding of the applet development process.

1. Demand analysis

This small program mainly shows users some goods for sale, and then guides users to collect, add to the shopping cart, place an order, pay, view logistics, confirm the harvest and other operations, forming a complete mall interactive closed loop.

1.1 Technology Selection

The small program is generally composed of two parts: front end and back end. The front end is a small program that you can see, including rendering of page data and user interaction on the page. The back end is primarily responsible for providing the data and apis for users to manipulate the data. For the mall small program, often also need a background management end, allowing the operation of key data such as goods (price, inventory), orders (delivery, return).

In terms of technology selection, the front-end uses the native solution for development, and the back-end uses the applet cloud provided by the applet official. Small program cloud eliminates the tedious process of server building and data interface implementation in small program development.

1.2 Requirement Description

Since it is a small program of shopping mall, the project can be roughly divided into four modules: advertising module, commodity module, shopping cart module and personal center module.

Each module according to the actual needs we can further subdivide the function of several modules, so as to determine the page design. We set up these four modules as four bottom navigation entry.

2. Preparation before development

2.1 Create a new applet

This section does not do the introduction, the reader can search for information on how to create small programs.

2.2 Setting up a project Directory

Create a new Mall (here for cool Shopping) as the project directory. It contains the following:

  • Components directory: This directory is used to store content related to custom components.

  • Images directory: Mainly used to store the image information used in the mall.

  • Libs directory: This directory is used to store third-party libraries that you rely on for your mall project.

  • The Models directory: Mainly used to encapsulate the Model operation classes that interact with the background.

  • Pages directory: Mainly used to store each specific page.

  • Utils directory: mainly used to store the various tool classes used in the development process of the mall, to avoid duplication of code.

  • App.js: small program entry file.

  • App. json: applets global configuration file.

  • App.wxss: Common style sheet for small programs

    At this point, the preparation is done, and we can start small program development

The last

⚽ This article introduces the requirements analysis and preparation for the development of mall mini programs ~ ⚾ If this article is helpful to you, please click the “like” to collect yo ~ 🏀GitHub blog github.com/Awu1227. 🏉 I have other columns, welcome to read ~ 🏐 Playing with the Beauty of CSS 🎱Vue from giving up to getting Started 🎳 Simple JavaScript