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