[small program project development -- Jingdong Mall] the home page commodity floor of uni app

Welcome to
Magic house ！！

The article contains columns
-- 2022 Wechat applet Jingdong Mall actual battle --

Column content （ Before using the following articles strong Suggest Eat the article first ）
-- uni-app Project structures, --
-- Jingdong Mall uni-app To configure tabBar & Window style --
-- Jingdong Mall uni-app Developed subcontracting configuration --
-- Jingdong Mall uni-app Developed rotation chart --
-- Jingdong Mall uni-app The classified navigation area --

One 、 design sketch ：

Two 、 Data acquisition :

• Data interface style 【 Divided into the title （ Including pictures , written words ）, list （ Picture text ）】

{
    
    "message": [
        {
    
            "floor_title": {
    
                "name": " Women's fashion ",
                "image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_title.png"
            },
            "product_list": [
                {
    
                    "name": " High quality clothing ",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/[email protected]",
                    "image_width": "232",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query= dress "
                },
                {
    
                    "name": " It's hot in spring ",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/[email protected]",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query= heat "
                },
                {
    
                    "name": " Clearing the warehouse with hot money ",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/[email protected]",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query= Hot style "
                },
                {
    
                    "name": " pollen ",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/[email protected]",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query= In the spring "
                },
                {
    
                    "name": " heartache ",
                    "image_src": "https://www.zhengzhicheng.cn/pyg/[email protected]",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query= cardiac "
                }
            ]
        },
       
    "meta": {
     "msg": " To be successful ", "status": 200 }
}

• Definition data data

 data() {
    
      return {
    
        //  Floor data array 
        floorList: []
      };

• method Define the data retrieval method

// Get floor navigation data 
      async getfloorList() {
    
        const {
    
          data: res
        } = await uni.$http.get('/api/public/v1/home/floordata')
        // If the call fails   Display the error prompt 
        if (res.meta.status != 200) return uni.$showMsg()
        this.floorList = res.message
      },

• onload Call function
  

---

3、 ... and 、UI Interface rendering

• Render page images in the dynamic loop data list , have access to vue grammar v-bind:, Dynamic binding , Also support mustache grammar , But it is only limited to some output such as text mustache grammar Such as output title text , Attributes in components are still not supported mustache The grammatical

And the style of the obtained picture is dynamic style in need Followed by {} Represents dynamic rendering

<!--  Floor area  -->
    <!--  Floor container  -->
    <view class="">
      <!--  floor  item -->
      <view class="floor_list" v-for="(item,index) in floorList" v-bind:key="index">
        <!--  Floor title  -->
        <view class="floor_title">
          <image v-bind:src="item.floor_title.image_src" class="floor_title_image" mode="widthFix"></image>
          <!-- <text>{
    {
    item.floor_title.name}}</text> -->
        </view>
        <!--  Floor list  -->
        <view class="floor_product">
          <!--  Large picture on the left  -->
          <view class="left-img-box">
            <!--  Splicing   Incomplete unit px -->
            <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}">
            </image>
          </view>
          <!--  List of pictures on the right  -->
          <view class="right-img-box">
            <!--  The judgment index is 0 What happened  -->
            <view class="right-img-item" v-for="(product,i) in item.product_list" v-bind:key="i" v-if="i != 0">
              <image :src="product.image_src" :style="{width: product.image_width + 'rpx'}" mode="widthFix">
            </view>
            </image>
          </view>
        </view>
      </view>
    </view>

// notes ： style 
  .floor_title {
    
    display: flex;
    flex-direction: column;

  }

  .floor_title image {
    
    height: 60rpx;
    width: 100%;
  }

  .floor_product {
    
    display: flex;
    padding: 10rpx;
  }

  .right-img-box {
    
    justify-content: space-around;
    display: flex;
    flex-wrap: wrap;
  }

In the setting style Wrap style is
flex-wrap: wrap;
They can't be used
white-space： normal
This is because display:flex Will be with white-space： normal Cause style conflicts , It's not going to work

design sketch ：

Four 、 Go to the product page

• Create product page , Because this page is not a user Loading applet Mainly initialized objects , Put it on to subcontract in .
  

4.1、 Processing interface URL Address

• In practice, the interface gives URL The address does not match your own named page , And Corresponding page parameters are required , You need to operate it

Because data retrieval and page rendering are synchronized , So here we deal with URl Links use forEach loop
He and for The difference lies in （for&forEach The article explain & Arrow function ）

• for Index the corresponding data by subscript ,forEach yes JavaScript Function method of defined array adopt JavaScript The underlying program Loop through the data elements of the array , The principle is that the pointer points to , So in the face of millions of data sets ,for May get stuck ,forEach A few milliseconds .
• for Can pass break interrupt , forEach Can not be
• forEach Is a function method of an array , You cannot assign or modify variables

---

The biggest difference between the two

• forEach It's a function Can pass Set parameters Come on Store index subscript data values , This is more convenient in operation
• for Loop execution Can only be generated through a loop Index subscript The number Then by index subscript operation Data elements of an array

• Implementation code

 methods: {
    
   // Get floor navigation data 
   async getfloorList() {
    
     const {
    
       data: res
     } = await uni.$http.get('/api/public/v1/home/floordata')
     // If the call fails   Display the error prompt 
     if (res.meta.status != 200) return uni.$showMsg()
     
     //  double forEach Cyclic modification URL
     res.message.forEach(floor => {
      
       floor.product_list.forEach(prd => {
      
         prd.navigator_url = '/subpackages/goods_list/goods_list?' + prd.navigator_url.split('?')[1]  // Cut to list   Take the following page parameters 
       })
     })
     this.floorList = res.message
   },

Successfully modified

5、 ... and 、 Configure page components navigator Jump to the page

• To the corresponding On the product page view Change it to navigator Components

 <!--  Floor area  -->
    <!--  Floor container  -->
    <view class="">
      <!--  floor  item -->
      <view class="floor_list" v-for="(item,index) in floorList" v-bind:key="index">
        <!--  Floor title  -->
        <view class="floor_title">
          <image v-bind:src="item.floor_title.image_src" class="floor_title_image" mode="widthFix"></image>
          <!-- <text>{
    {
    item.floor_title.name}}</text> -->
        </view>
        <!--  Floor item list  -->
        <view class="floor_product">
          <!--  Large picture on the left  -->
          <navigator class="left-img-box" :url="item.product_list[0].navigator_url">
            <!--  Splicing   Incomplete unit px -->
            <image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}">
            </navigator>
          <!--  List of pictures on the right  -->
          <view class="right-img-box">
            <!--  The judgment index is 0 What happened  -->
            <navigator class="right-img-item" v-for="(product,i) in item.product_list" v-bind:key="i" v-if="i != 0" :url="product.navigator_url">
              <image :src="product.image_src" :style="{width: product.image_width + 'rpx'}" mode="widthFix">
            </navigator>
            </image>
          </view>
        </view>
      </view>
    </view>

Accept page parameters , And render as window title
stay goods_list.vue In file

export default {
    
    data() {
    
      return {
    
        title:''   // Defining parameters 
      };
    },
    onLoad(options){
    
      this.title = options  //  Receive parameters and assign values 
      },
    onReady(){
    
      uni.setNavigationBarTitle({
    
        title: this.title.query  //  When programming   Set the style 
      })
    }

effect ：

6、 ... and 、 Branch merge and commit （ the selected readings *）

• Will local home Branch into master Branch
• Push the code to the remote warehouse
• Delete the branch

---

operation

1. git branch notes ： View current branch
2. git status notes ： View the current file status
3. git add . notes ： Add all files to staging area
4. git commit -m “ Completed the development of homepage function ” notes ： Submit to the local repository
5. git push -u origin home notes ： -u It's configuration upstream, Submit the branch from local warehouse to remote warehouse home preservation , The default host is determined
6. git checkout master notes ： Switch branches to master
7. git merge home notes ： Merging branches
8. giit push notes ： Because of the front -u Set up upstearm So this time, the default submission is master Branch ( No other parameters are required ）
9. git branch -d home notes ： Delete local home Branch

---

   Thanks for reading , Your praise and collection are the biggest motivation for me to create ！