夜光带你走进 微信小程序开发(四十)擅长的领域

夜光序言:

 

赋予清风明月与你
相约少年游,鲜衣怒马。
秀发如烟,风中清扬,
寄予流轩,月下未殇。
清风疏旷,霭霭浮光,
流光皎皎,月色溶溶。
似逢诗意少年,笔下风月无端,
自矜风采若清流。
远山隐隐远水粼粼,天涯远。
岁月静好,于你亦然。

 

 

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

这里我们来优化接口代码

提取公共的接口路径

export const request=(params)=>{
     //这里,我们定义一个公共的url
     //https://api-hmugo-web.itheima.net/api/public/v1/categories
  const baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1';

      //夜光:写一个回调函数嗯
    return new Promise((resolve,reject)=>{
        wx.request({
          ...params,
          url: baseUrl+params.url,
          //成功之后需要做什么呢
          success:(result)=>{
            resolve(result);
          },
          //那么失败之后呢~
          fail:(err)=>{
            reject();
          }
        });
    })
}
//0 引入 用来发送请求的 方法 一定要把路径补全
import { request } from"../../request/index.js";

Page({
  /**
   * 页面的初始数据
   */
  data: {
      //轮播图数组
      swiperList:[],
      //夜光:同理,我们再添加一个变量
      //导航数组
      cateList:[],
      //下面来一个最关键的
      //楼层数组
      floorList: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  //这个表示页面开始加载,就会触发的一个事件
  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
    //     })
    //   }
    // });
    
    this.getSwiperList(); //夜光:方法已经封装好了
    this.getCateList(); //夜光:方法已经封装好了
    this.getFloorList(); //夜光:方法已经封装好了
  },

  //下面我们再做个~~
  //夜光:获取轮播图数据的方法
  getSwiperList(){
    request({
      url: '/home/swiperdata'
    })
      .then(res => {
        //我们通过下面这个方法进行赋值
        this.setData({
          swiperList: res.data.message
        })
        //是不是感觉上面这个方法很酷炫

      })
  },

  //夜光:获取导航的方法
  getCateList() {
    request({
      url: '/home/catitems'
    })
      .then(res => {
        //我们通过下面这个方法进行赋值
        this.setData({
          cateList: res.data.message
        })
        //是不是感觉上面这个方法很酷炫
      })
  },

  //夜光:获取导航的方法
  getFloorList() {
    request({
      url: '/home/floordata'
    })
      .then(res => {
        //我们通过下面这个方法进行赋值
        this.setData({
          floorList: res.data.message
        })
        //是不是感觉上面这个方法很酷炫
      })
  }



})

我们以前写web的时候,一个关键的东西,叫做url传参

我们添加一个编译模式

用来实现每次第一个页面都是商品列表页面

刚刚失误了,忘记添加一个参数,启动的参数

发布了1529 篇原创文章 · 获赞 305 · 访问量 18万+

猜你喜欢

转载自blog.csdn.net/weixin_41987706/article/details/104921138
今日推荐