1. Create an applet project

Fill in your appID

2. Set up a directory structure

Directory name role
styles Store common styles
components Storage component
lib Third Party library
utils Your own help library
request Own interface help library

3. Build the project page

The name of the page The name of the
Home page index
Category pages category
Product list page good_list
Product Details page goods_detail
Shopping cart page cart
Collection page collect
The order page order
Search page search
Personal Center Page user
Feedback page feedback
The login page login
Authorization page auth
The settlement page pay

5. Set up tabbar structure of the project

Configure it in the app.json file at the same level as Window.

PagePath: import address iconPath: icon selectedIconPath: selected icon

"tabBar": { 
    "color": "# 999"."selectedColor": "#ff2d4a"."backgroundColor": "#fafafa"."position": "bottom"."borderStyle": "black"."list": [{"pagePath": "pages/index/index"."text": "Home page"."iconPath": "icons/home.png"."selectedIconPath": "icons/home-o.png"
      },
      {
      "pagePath": "pages/category/index"."text": "Classification"."iconPath": "icons/category.png"."selectedIconPath": "icons/category-o.png"
      },
      {
      "pagePath": "pages/cart/index"."text": "Shopping cart"."iconPath": "icons/cart.png"."selectedIconPath": "icons/cart-o.png"
      },
      {
      "pagePath": "pages/user/index"."text": "I"."iconPath": "icons/my.png"."selectedIconPath": "icons/my-o.png"}},Copy the code

6. Initialize the page style

6.1 Define global in app.wxSS

  1. Defining global styles
/* Wildcard * */ is not supported in wechat applet
page,view,text,swiper,swiper-item,image,navigator{
  /* p0+m0+bz */
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
Copy the code
  1. Defining theme colors
page{
    --themeColor:#eb4450; // Define the theme color
    font-size:28rpx; // Define the font
}
Copy the code

6.2 Use it on the related page

In the index. WXSS use

view{
  /* Use the theme color */
  color:var(--themeColor);
}
Copy the code

6.3 Setting the Navigation Color

In the app. Json

"window": {"backgroundTextStyle":"light"."navigationBarBackgroundColor": "#eb4450"."navigationBarTitleText": "MINA_shop"."navigationBarTextStyle":"white"
  },
Copy the code