Some functions of applet development

Preparation before project

Turn off automatic thermal overload warning ： details -> Local settings -> close “ Enable automatic code hot reloading ”

Create a new project and sort out the project structure

Configure navigation bar effects

overall situation app.json->window

To configure tabBar

In the global app.json neutralization window Create a level by level tabBar node

To achieve the effect of the rotation map

Address of the interface

① Interface for obtaining the data list of the rotation chart
② Define the method of obtaining the data of the rotation chart in the sub page

③ stay onload This method is called in - adopt this As soon as the instance page is loaded

④ adopt setDate（） Assign data data The array inside

 data: {
    
    // A list for storing the data of the carousel 
    swiperList:[]

  },
 // Method for obtaining rotation chart data 
  getSwiperLsit()
  {
    
    wx.request({
    
      url:'https://www.escook.cn/slides',
      method:'GET',
      success:(res)=>{
    
        console.log(res);  
        this.setData({
    
        
          swiperList:res.data
        })
      }
    })

  },

⑤ Render the effect of the carousel

<swiper indicator-dots circular>
<swiper-item wx:for="{
    {swiperList}}" wx:key="id">
<image src="{
    {item.image}}">
</image>
</swiper-item>
</swiper>

Pull up and touch the bottom

Step one - Define the method of random color acquisition

 data: {
    

    colorList:[]
  },
  
   getColors(){
    
wx.request({
    
  url: 'https://www.escook.cn/api/color',
  method:'get',
  success:({
     data:res})=>{
    
    console.log(res)
    //  Data splicing 
    this.setData({
    
      colorList:[...this.data.colorList,...res.data]
    })
  }
})
  },

Step two - Get the initial data when the page is loaded

  /** *  Life cycle function -- Monitor page loading  */
  onLoad(options) {
    
this.getColors()
  },

Step three - Rendering UI Structure and beautify the page effect

<!--pages/contact/contact.wxml-->
<view wx:for="{
     {colorList}}" wx:key="index" class="num-item" style="background-color: rgba({
        {
        item}});">{
   {item}}</view>

The page should be large enough to pull down and refresh

Step four - Get random color when pulling up to touch the bottom

// Handling function of page pull bottom event 
onReachBottom:function(){
    
// Call the method to get random colors 
this.getColors()
}

Pull up to refresh , One time data acquisition 10 strip , from 10 Article becomes 20 strip

Step five - add to loading Hint effect

  getColors(){
    

    // Exhibition loading effect 
    wx.showLoading({
    
      title: ' Data loading ...',
    })

wx.request({
    
  url: 'https://www.escook.cn/api/color',
  method:'get',
  success:({
     data:res})=>{
    
    console.log(res)
    //  Data splicing 
    this.setData({
    
      colorList:[...this.data.colorList,...res.data]
    })
  },
  // Manually turn off data loading 
  complete:()=>{
    
    wx.hideLoading()
  }
})
  },

Step six - Throttle the pull-up contact bottom

 data: {
    
    colorList:[],
    isloading:false
  },
  
  getColors(){
    
    this.setData({
    
     isloading:true
    })
    // Exhibition loading effect 
    wx.showLoading({
    
      title: ' Data loading ...',
    })
wx.request({
    
  url: 'https://www.escook.cn/api/color',
  method:'get',
  success:({
     data:res})=>{
    
    console.log(res)
    //  Data splicing 
    this.setData({
    
      colorList:[...this.data.colorList,...res.data]
    })
  },
  // Manually turn off data loading 
  complete:()=>{
    
    wx.hideLoading()
    this.setData({
    
      isloading:false
    })
  }
})
  },
  
   onReachBottom() {
    
    if(this.data.isloading) return
this.getColors()
  },