夜光带你走进 微信小程序开发（三十二）擅长的领域

夜光序言：

 

无论平淡如菊的悠然恋情，还是生死交付的绚烂激情，爱情本身是怎样的形式并不重要。重要的，谁是那个与你相依一世的人。不要到错过再后悔……

 

 

 

 
 
正文：
 
                                              以道御术 / 以术识道

这里会有一个较为核心的技术，需要我们好好消化和理解

<!-- <view>首页
<text  class="iconfont icon-gouwuchekong"></text>
</view> -->

<view class="pyg_index">
   <!-- 搜索框开始 -->
   <SearchInput></SearchInput>
   <!-- 搜索框结束 -->

   <!-- 轮播图开始 -->
   <view class="index_swiper">
      <swiper class="Top" autoplay="true" circular="true" indicator-dots="true">
         <swiper-item
         wx:for="{{swiperList}}"
         wx:key="goods_id"
         >
             <navigator>
                 <image class="pic1" src="{{item.image_src}}" mode="widthFix"></image>
             </navigator>
         </swiper-item>
      </swiper>
   </view>
   <!-- 轮播图结束 -->

</view>

我们继续写嗯

//0 引入 用来发送请求的 方法 一定要把路径补全
import { request } from"../../request/index.js";

Page({
  /**
   * 页面的初始数据
   */
  data: {
      //轮播图数组
      swiperList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  //这个表示页面开始加载，就会触发的一个事件
  onLoad: function (options) {
    //1. 发送异步请求，来获取轮播图数据
    // wx.request({
    //   url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
    //   success: (res)=>{
    //      console.log(res);
    //     //我们通过下面这个方法进行赋值
    //     this.setData({
    //       swiperList:res.data.message
    //     })
    //   }
    // });
    request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
      })
      .then(res => {
      //我们通过下面这个方法进行赋值
      this.setData({
        swiperList: res.data.message
      })
//是不是感觉上面这个方法很酷炫

    })
  },

})

export const request=(params)=>{
      //夜光：写一个回调函数嗯
    return new Promise((resolve,reject)=>{
        wx.request({
          ...params,
          //成功之后需要做什么呢
          success:(result)=>{
            resolve(result);
          },
          //那么失败之后呢~
          fail:(err)=>{
            reject();
          }
        });
    })
}