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

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.生命周期函数中调用

 onLoad(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();
  }

5.页面结构

<view class="list-item" wx:for="{{shopList}}" wx:key="{{item.id}}">
<view class="image-item">
<image src="{{item.images[0]}}" mode="">
</image>
</view>
<view class="info">
<text class="info-title">{{item.name}}</text>
<!-- 格式化电话号码 -->
<text>电话：{{m1.formartTel(item.phone)}}</text>
<text>地址{{item.address}}</text>
<text>营业时间{{item.businessHours}}</text>
</view>
</view>

<wxs src="../../utils/tool.wxs" module="m1"></wxs>

6.页面样式

.list-item{
	display: flex;
	padding: 15rpx;
	border: 1rpx solid #efefef;
	margin: 15rpx;
	border-radius: 15rpx;
	box-shadow: 1rpx 1rpx 15rpx #ddd;
}
.list-item image{
	width: 250rpx;
	height: 205rpx;
	display: block;
	margin-right: 15rpx;
}
.info{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	font-size: 24rpx;
}
.info-title{
	font-weight: bold;
}

7.js配置完整版

// pages/shoplist/shoplist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    query:{},
    isLoading:false, //节流标志位
    shopList:[],
    param:{
      _page:1,
      _limit:10
    },
    total:0
  },

  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
      }
    })
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query:options
    })
    this.getShopList();
  },

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

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  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();
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})