【微信小程序】本地生活案例

标签：https api 微信案例 base 本地 net data itheima

1.效果图

1-1.首页效果图

1-2.列表

2.前期配置

2-1.微信后台配置

1.访问微信小程序管理后台配置请求域

只有配置了后台才能请求接口

3.功能实现

3-1.首页

1.请求后台接口获取轮播图

    wx.request({
      url: 'https://applet-base-api-t.itheima.net/slides',
      method:'GET',
      success:(res)=>{
        console.log(res)
        this.setData({
          arr:res.data
        })
      }
    })
  }

2.返回数据

[
  {
    "id": 1,
    "image": "https://applet-base-api-t.itheima.net/img/banner/banner01.png",
    "link": ""
  },
  {
    "id": 2,
    "image": "https://applet-base-api-t.itheima.net/img/banner/banner02.png",
    "link": "/pages/list/list?cat=10"
  }
]

3.请求后台接口获取九宫格

  goGetNine(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/categories',
      method:'GET',
      success:(res)=>{
        console.log(res)
        this.setData({
          gradList:res.data
        })
      }
    })
  }

4.返回数据

[
  {
    "id": 1,
    "name": "美食",
    "icon": "https://applet-base-api-t.itheima.net/img/nav/nav01.png"
  },
  {
    "id": 2,
    "name": "洗浴足疗",
    "icon": "https://applet-base-api-t.itheima.net/img/nav/nav02.png"
  },
  {
    "id": 3,
    "name": "结婚啦",
    "icon": "https://applet-base-api-t.itheima.net/img/nav/nav03.png"
  },
  {
    "id": 4,
    "name": "卡拉OK",
    "icon": "https://applet-base-api-t.itheima.net/img/nav/nav04.png"
  },
  {
    "id": 5,
    "name": "找工作",
    "icon": "https://applet-base-api-t.itheima.net/img/nav/nav05.png"
  },
  {
    "id": 6,
    "name": "辅导班",
    "icon": "https://applet-base-api-t.itheima.net/img/nav/nav06.png"
  },
  {
    "id": 7,
    "name": "汽车保养",
    "icon": "https://applet-base-api-t.itheima.net/img/nav/nav07.png"
  },
  {
    "id": 8,
    "name": "租房",
    "icon": "https://applet-base-api-t.itheima.net/img/nav/nav08.png"
  },
  {
    "id": 9,
    "name": "装修",
    "icon": "https://applet-base-api-t.itheima.net/img/nav/nav09.png"
  }
]

4.生命周期函数中调用

 onl oad(options) {
    this.goGet()
    this.goGetNine();
  },

5.页面结构

<!--pages/home/home.wxml-->
<!-- 轮播图区域 -->
<swiper  indicator-dots autoplay indicator-color="white" indicator-active-color="gray" interval="3000" circular>
	<swiper-item  wx:for="{{arr}}" wx:key="id">
		<image src="{{item.image}}"></image>
	</swiper-item>
</swiper>
<!-- 九宫格区域 -->
<view class="body-main">
	<navigator class="body-child" wx:for="{{gradList}}" wx:key="id" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}">
		<image src="{{item.icon}}"></image>
		<text>{{item.name}}</text>
	</navigator>
</view>
<!-- 静态图片区域 -->
<view class="static-image">
<image src="../../images/link-01.png" mode="widthFix"></image>
<image src="../../images/link-02.png" mode="widthFix"></image>
</view>

6.页面样式

/* pages/home/home.wxss */
swiper{
	height:350rpx;
}

swiper image{
	height:100%;
	width: 100%;
}

.body-main{
	display: flex;
  flex-wrap: wrap;
	margin: 15px 0;
	border-top: 1rpx solid #efefef;
	border-left: 1rpx solid #efefef;
}
.body-child{
	width: 33.33%;
	height: 200rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-right: 1rpx solid #efefef;
	border-bottom: 1rpx solid #efefef;
	box-sizing: border-box;
}
.body-child image{
	width: 60rpx;
	height: 60rpx;
}
.body-child text{
	margin-top: 20rpx;
	font-size: 24rpx;
}

.static-image{
	display: flex;
	padding: 20rpx 10rpx;
	justify-content: space-around;
}

.static-image image{
	width:45% ;
}

3-2.列表

1.动态设置表头
在.js生命周期函数中赋值

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 动态设置标题，i读取路由参数
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  }

2.根据参数获取数据

 getShopList(){
    // 开始加载数据
    this.data.isLoading=true
    wx.showLoading({title:'正在加载中'}) //开启动画效果
    wx.request({
      // 动态参数用反引号！！！！
      url: `https://applet-base-api-t.itheima.net/categories/${this.data.query.id}/shops`,
      method:'GET',
      data:this.data.param,
      success:(res)=>{
        console.log(res.data)
        this.setData({
          shopList:[...this.data.shopList,...res.data],
          total:+res.header["X-Total-Count"]
        })
      },
      complete:()=>{
        wx.hideLoading() //隐藏动画
        this.data.isLoading=false
      }
    })
    
  }

注意：动态参数一定要用反引号！！！！

3.在.json中开启下拉刷新

4.在.js配置下拉刷新和上拉刷新

/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    console.log("xzzzz")
    this.data.param={
      _page:1,
      _limit:10
    },
    this.data.total = 0
    this.data.isloading = false
    this.data.shopList=[]
    // 重新发起请求
    this.getShopList();
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
     // 判断是否还有下一页数据
  if (this.data.param._page * this.data.param._limit >= this.data.total) {
    return wx.showToast({
      title: '数据加载完毕！',
    })
  }
    if(this.data.isLoading)return
    console.log("上拉刷新")
    this.data.param._page++;
    this.getShopList();
  }