[small program project development -- Jingdong Mall] rotation chart of uni app development

Preface

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 —

One 、 newly build tabBar Branch （ the selected readings *）

To create a branch , It is also a good habit of project development , In this way, the open projects are in good order
You can also skip this section , It does not affect the reading impression

In the root directory , Right click to open bash
be based on master Branch created locally home Sub branches , Used to develop and home Related functions ：

git checkout -b home

View branches （ There is * Represents the current branch ）

git branch

Two 、 Configure network requests

Due to the limitation of the platform , Not supported in applet projects axios, And the original wx.request() API The function is relatively simple , Global customization functions such as interceptors are not supported . therefore , It is suggested that uni-app Project use @escook/request-miniprogram Third party packet initiates network data request .

Please refer to @escook/request-miniprogram Official installation documentation 、 To configure 、 Use
Official documents ：https://www.npmjs.com/package/@escook/request-miniprogram

According to the official process , We first install the corresponding package , Use command line tools cmd Go to the project root directory Initialize a package.json file

npm init -y

Copy the Import command of the official website

npm install @escook/request-miniprogram

Configure the entry file main.js
Import the corresponding package and mount it , And the definition Response interceptors and request responders
( stay uni-app In development , Try to do it all in the form of uni As a top-level object ）

// Import network request package 
import {
    
  $http
} from '@escook/request-miniprogram'
// mount 
uni.$http = $http
// Set the root path of the request address 
$http.baseUrl = 'https://www.uinav.com'
//  Request interceptor 
$http.beforeRequest =  function() {
    
  uni.showLoading({
    
    title: ' Data loading ...',
  });
}
//  Response interceptors 
$http.afterRequest = function(){
    
  uni.hideLoading()
}

3、 ... and 、 Carousel area

Request the data of the rotation chart
Implementation steps ：

1. stay data Defines an array of carousel charts in
2. stay onLoad Method of calling round chart data in life cycle function
3. stay methods Define the method of obtaining the data of the rotation chart in

Home page API

Get the rotation chart data of the home page

• Request path ：https:// Request domain name /api/public/v1/home/swiperdata
• Request method ：GET
• Request parameters

Parameter name	Parameter description	remarks
nothing

• Response parameter

Parameter name	Parameter description	remarks
image_src	Picture path
open_type	Navigation link type
navigator_url	Navigation link path

• Response data reference

{
    "message": [
        {
            "image_src": "https://www.zhengzhicheng.cn/pyg/banner1.png",
            "open_type": "navigate",
            "goods_id": 129,
            "navigator_url": "/pages/goods_detail/main?goods_id=129"
        },
        {
            "image_src": "https://www.zhengzhicheng.cn/pyg/banner2.png",
            "open_type": "navigate",
            "goods_id": 395,
            "navigator_url": "/pages/goods_detail/main?goods_id=395"
        },
        {
            "image_src": "https://www.zhengzhicheng.cn/pyg/banner3.png",
            "open_type": "navigate",
            "goods_id": 38,
            "navigator_url": "/pages/goods_detail/main?goods_id=38"
        }
    ],
    "meta": { "msg": " To be successful ", "status": 200 }
}

stay home.vue file in

<script>
  export default {
    
    data() {
    
      return {
    
      //  Defining data 
        swiperList: []
      };
    },
    onLoad() {
    
      //  Retrieval method , Get the data of the carousel 
      this.getSwiperList()
    },
    methods: {
    
      async getSwiperList() {
    
        // '/'  The root directory is in main.js File configuration  baseUrl 
        const res = await uni.$http.get('/api/public/v1/home/swiperdata')
        // Output   data 
        console.log(res.data)
      }
    }
  }
</script>

Printing successful （ Data acquisition success ）

adopt meta Of status The attribute value determines whether Data acquired successfully

 methods: {
    
   async getSwiperList() {
    
     // '/'  The root directory is in main.js File configuration  baseUrl 
     const res = await uni.$http.get('/api/public/v1/home/swiperdata')
     //  An error message will pop up when the call fails 
     if (res.data.meta.status != 200) {
    
       uni.showToast({
    
         title: " Data pull failed ", //  Text display 
         'icon': "error", //  Show Error Icon 
         "duration": 1500 //  Set the dwell event to  1.5s duration -  Continuous events 
       })
       //  Data to be called   assignment 
       this.swiperList = res.data.message
     }
   }
 }

Assignment successful

Four 、 matters needing attention ！：

The assignment here cannot be like Native applet call this.setData({this.swiperList = res.data.message}) Use , You can use... In applets this.data Updating data does not update the view and thsi.setData({}) Data and views are updated synchronously （ The data rendering page will be reloaded ）,

But in uni-app It's not thsi.setData({}) Methodical , Use this.data Direct assignment . This is because in native applet development , Data nodes data Is defined as a dictionary , And in the uni-app Is to get data in the form of a function return value , At this point, the data can be directly assigned .

5、 ... and 、 Rendering the carousel UI structure

uswiper  Quickly generate   Carousel code block 

• Use vue-for Dynamic looping chart array , Cyclic dynamic binding requires that the label attribute node be preceded by :（ The colon : yes v-bind Abbreviation , That is, dynamically binding data , It can be followed by variables or variable expressions , If there is no colon, it is a string , At this time, the loop will not display the effect

<!--  Templates  -->
<template>
  <view>
    <!--  Rendering the carousel UI structure  -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!--  similar python for i,j in object  Get the corresponding item i And index j -->
      <swiper-item v-for="(item,i) in swiperList" :key="i">
        <view class="swiper-item">
          <image :src="item.image_src"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<!--  style  -->
<style lang="scss">
  swiper {
    
    height: 333rpx;
    .swiper-item,
    image {
    
      width: 100%;
      height: 100%;
    }
  }
</style>

• effect ：
  

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