微信小程序入门案例（二）

1、书接上回

想了解前文的朋友，可以点击微信小程序前端零基础入门案例，接着上篇的的案例，我们接着完善主页的内容。

2、案例展示

点击美食，跳转到美食的详情页，点击洗浴足疗跳转对应的详情页，以此类推…

3、代码编写

3.1、添加详情页

修改app.json页面的pages选项，添加serverlist页面，用于展示对应的详情页，代码如下，

"pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/about/about",
    "pages/serverlist/serverlist"
  ],

3.2、实现页面跳转

在home.wxml，将九宫格的数据添加导航，并传递对应的id和name，用于详情页的标题和发起其对应请求，代码如下

<view class="gridList">
  <navigator class="gridItem" wx:for="{{GridList}}" wx:key="id" url="/pages/serverlist/serverlist?id={{item.id}}&title={{item.name}}">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </navigator>
</view>

3.3、接收数据，发起请求

详情页接收主页点击后传递来的id和name，name用于动态渲染标题，id用于动态发起请求，
1、打开serverlist.js，定义数据，在data中，query接收主页传递来的id和name，details用于接收发送请求后的数据，page表示第几页，pageSize表示每页显示的条数，total表示总条数，flag用于之后的判断节流，避免因上划触底多次而发起多次请求
2、自定义方法getDetails(),用于发送请求，接收数据。在请求数据前，调用wx.showLoading()方法用于显示数据加载画面，将flag置为true表示正在发送请求，在complete中重置为false，表示请求结束，避免重复发起请求，然后再调用wx.request()用于发起请求，其中url是根据query中的id为动态变化的
3、onLoad()中的方法在页面加载时就调用，将传递来的数据id和name封装到query中，并发起请求，并对data中数据进行赋值
4、onReady()中的方法会在页面初次渲染完成时调用，wx.setNavigationBarTitle()方法是为了渲染页面的标题，例如美食…
5、 onPullDownRefresh()函数实实在页面下拉时触发，用于重置数据，发送新的请求
6、onReachBottom() 会在上拉到距离屏幕底部50像素(默认50像素，可在对应的.json文件中修改)时调用，首先判断下一页是否还有数据需要，如果没有的话，wx.showToast()方法会在屏幕中跳出提示对应的提示框，显示title中的内容，如果有的话，修改page的值，再次发送请求下一页的数据。

// pages/serverlist/serverlist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    query:{},
    details:[],
    page:1,
    pageSize:10,
    total:0,
    falg:false
  },
  getDetails(stop){
    wx.showLoading({
      title: '数据加载中...',
    })
    this.setData({
      falg:true
    })
    wx.request({
      url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
      method: 'GET',
      data:{
        _page:this.data.page,
        _limit:this.data.pageSize
      },
      success:(res)=>{
        this.setData({
          details: [...this.data.details, ...res.data],
          total:res.header['X-Total-Count']-0
        })
      },
      complete:()=>{
        wx.hideLoading()
        this.setData({
          falg:false
        })
        stop && stop()
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      query:options
    })
    this.getDetails();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.setNavigationBarTitle({
      title: this.data.query.title,
    })
  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    //重置数据
    this.setData({
      page:1,
      total:0,
      details:[]
    })
    //发起请求
    this.getDetails(()=>{
      wx.stopPullDownRefresh()
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (this.data.page * this.data.pageSize >= this.data.total) {
      wx.showToast({
        title: '到底了！'
      })
    }
    if (this.data.falg==false && (this.data.page * this.data.pageSize < this.data.total)) {
      this.setData({
        page:this.data.page+1
      })
      this.getDetails()
    }
  },

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

  }
})

3.4、将数据渲染到页面

1、serverlist.wxml页面，类似浏览器的html页面，其中最后一行代码见3.5数据处理中会有详解，是用于处理手机号字符串，代码如下

<view wx:for="{{details}}" wx:key="id" class="detail-item">
  <view class="img">
    <image src="{{item.images[0]}}"></image>
  </view>
  <view class="text">
    <text>{{item.name}}</text>
    <text>电话:{{tools.splitPhone(item.phone)}}</text>
    <text>地址:{{item.address}}</text>
    <text>营业时间:{{item.businessHours}}</text>
  </view>
</view>
<wxs src="../../utils/tools.wxs" module="tools"></wxs>

2、serverlist.wxss页面，是为了美化serverlist.wxml页面，类似浏览器的css的作用，代码如下

/* pages/serverlist/serverlist.wxss */
.detail-item{
  display: flex;
  padding: 10rpx;
  border: 2rpx solid #efefef;
  margin: 15rpx;
  border-radius: 10rpx;
  box-shadow: 2rpx 2rpx 10rpx #ddd;
}
.img image{
  width: 250rpx;
  height: 250rpx;
  margin-right: 20rpx;
}
.text{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 24rpx;
}
.text :nth-child(1){
  font-weight: bold;
}

3.5、数据处理

在详情页面中向手机号中添加“-”，便于记忆和拨号
1、在untils文件夹下新建一个tools.wxs文件，wxs相当于浏览器中的js代码，定义函数splitPhone函数用于处理手机号字符串，并导出，在serverlist.wxml页面进行调用。

function splitPhone(str){
  if (str.length != 11) {
    return str
  }
  var arr=str.split('')
  arr.splice(3,0,'-')
  arr.splice(8,0,'-')
  return arr.join('')
}
module.exports = {
  splitPhone:splitPhone
}

4、运行展示

代码编写完成后，发现页面数据和图片加载不出来，记得勾选一下如下选项，详情->本地设置->不校验…，设置完毕后就能全部加载出来了。

5、源码领取

点这里获取源码