小程序交互练习 - 美食列表小程序开发笔记
目录
美食列表
“美食列表”微信小程序是一个展示美食名称、美食图片及美食商家的电话、地址和营业时间等信息的微信小程序。下面将对“美食列表”微信小程序进行详细讲解。
功能描述
美食列表包含多条美食信息，每条美食信息左侧为美食图片，右侧为美食详细信息，包括美食名称、电话、地址和营业时间。该页面具有上拉触底加载数据和下拉刷新两个功能，即当用户上拉美食列表页时，如果页面即将到达底部，会自动加载更多数据；当用户下拉页面时，如果到达顶部后进行下拉操作，可以刷新页面。
准备工作
创建项目
使用测试号，不使用模版。如下图：
配置页面
项目创建完成后，在app.json文件中配置一个shoplist页面，
具体代码如下：
{
"pages": [
"pages/shoplist/shoplist"
]
......
}项目结构截图：
配置导航栏
在pages/shoplist/shoplist.json文件中配置页面导航栏，
具体代码如下：
{
"usingComponents": {},
"navigationBarTitleText": "美食"
}上述代码将导航栏标题设置为“美食”。
启动本地服务器
本地服务器为nginx，主要为返回相应数据。
需要准备十张美食图片放置在同级目录下的images文件夹中。
返回数据及格式如下：
<?php
$page = isset($_GET['page']) && !empty($_GET['page']) ? intval($_GET['page']) : 1;
$pageSize = isset($_GET['pageSize']) && !empty($_GET['pageSize']) ? intval($_GET['pageSize']) : 5;
$res = [
[
'id' => 1,
'name' => '簋街小龙虾',
'phone' => '131111111111',
'image' => 'http://localhost/shoplist/images/1.jpg',
'address' => '北京市昌平区',
'businessHours' => '周一至周日9:00-21:00'
],
[
'id' => 2,
'name' => '胡大饭馆',
'phone' => '13122222222',
'image' => 'http://localhost/shoplist/images/2.webp',
'address' => '北京市昌平区',
'businessHours' => '周一至周日9:00-21:00'
],
[
'id' => 3,
'name' => '地摊美食',
'phone' => '13133333333',
'image' => 'http://localhost/shoplist/images/3.webp',
'address' => '北京市昌平区',
'businessHours' => '周一至周日9:00-21:00'
],
[
'id' => 4,
'name' => '秋梨饭馆',
'phone' => '13144444444',
'image' => 'http://localhost/shoplist/images/4.jpg',
'address' => '北京市昌平区',
'businessHours' => '周一至周日9:00-21:00'
],
[
'id' => 5,
'name' => '米村拌饭',
'phone' => '13155555555',
'image' => 'http://localhost/shoplist/images/5.webp',
'address' => '北京市昌平区',
'businessHours' => '周一至周日9:00-21:00'
],
[
'id' => 6,
'name' => '红烧肉',
'phone' => '13166666666',
'image' => 'http://localhost/shoplist/images/6.webp',
'address' => '北京市昌平区',
'businessHours' => '周一至周日9:00-21:00'
],
[
'id' => 7,
'name' => '豆汁',
'phone' => '13177777777',
'image' => 'http://localhost/shoplist/images/7.webp',
'address' => '北京市昌平区',
'businessHours' => '周一至周日9:00-21:00'
],
[
'id' => 8,
'name' => '三更美龄粥',
'phone' => '13188888888',
'image' => 'http://localhost/shoplist/images/8.webp',
'address' => '北京市昌平区',
'businessHours' => '周一至周日9:00-21:00'
],
[
'id' => 9,
'name' => '簋街大龙虾',
'phone' => '13199999999',
'image' => 'http://localhost/shoplist/images/9.webp',
'address' => '北京市昌平区',
'businessHours' => '周一至周日9:00-21:00'
],
[
'id' => 10,
'name' => '江南小馆',
'phone' => '13100000000',
'image' => 'http://localhost/shoplist/images/10.webp',
'address' => '北京市昌平区',
'businessHours' => '周一至周日9:00-21:00'
],
];
echo json_encode($res);页面初始数据
在pages/shoplist/shoplist.js文件，设置页面初始化变量名称和变量值，具体代码如下：
data: {
data: {
shopList: [], // 保存美食列表信息
page: 1, // 默认请求第1页的数据
pageSize: 10, // 默认每页请求5条数据
total: 0, // 数据总数，默认为0
},
page: 1,
pageSize: 10,
scrollTop: 0,
scrollHeight: 0
},
设置获取美食数据
在pages/shoplist/shoplist.js文件，设置获取美食数据的函数，
在其中请求后端服务器数据并赋值系统变量。
具体代码如下：
getShopList: function () {
// 请求数据之前，展示加载效果，接口调用结束后，停止加载效果
wx.showLoading({
title: '数据加载中...'
})
wx.request({
url: 'http://127.0.0.1/shoplist/index.php',
method: 'GET',
data: {
page: this.page,
pageSize: this.pageSize
},
success: res => {
console.log(res.data)
this.setData({
shopList: res.data,
})
this.total = res.header['X-Total-Count'] - 0
},
complete: () => {
// 隐藏加载效果
wx.hideLoading()
}
})
},设置onload函数
编写onLoad()生命周期函数，实现页面加载完成时调用getShopList()函数，
具体代码如下：
onLoad(options) {
this.getShopList()
},
设置项目配置
在微信开发者工具的本地设置中勾选“不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”复选框。保存代码并运行程序，控制台中输出的美食列表信息。
页面渲染
前面的步骤已经实现了当页面加载完成时获取美食列表数据，并将数据保存到了shopList数组中。接下来可以通过列表渲染将shopList数组中的数据渲染到页面上。在pages/shoplist/shoplist.wxml文件中进行页面渲染，具体代码如下：
<!--pages/shoplist/shoplist.wxml-->
<wxs src="../../utils/tools.wxs" module="tools"></wxs>
<navigation-bar title="美食" back="{{false}}"></navigation-bar>
<view class="shop-item" wx:for="{{ shopList }}" wx:key="id">
<view class="thumb">
<image src="{{ item.image }}" />
</view>
<view class="info">
<text class="shop-title">{{ item.name }}</text>
<text>电话：{{ tools.splitPhone(item.phone) }}</text>
<text>地址：{{ item.address }}</text>
<text>营业时间：{{ item.businessHours }}</text>
</view>
</view>页面样式
在pages/shoplist/shoplist.wxss文件中进行页面样式美化，具体代码如下：
/* pages/shoplist/shoplist.wxss */
.container {
margin:0;
padding:0;
}
.shop-item {
margin-left:5vw;
margin-bottom:2vh;
display: flex;
}
.thumb {
display:flex;
flex-direction:row;
}
.thumb image{
width:30vw;
height: 15vh;
border-radius: 2%;
border: 6rpx solid #777F92;
}
.info {
display: flex;
flex-direction:column;
margin-left:2vw;
}
.info .shop-title {
font-size: 40rpx;
font-weight: bold;
}
.info text{
display: flex;
flex-wrap:wrap;
margin: 10rpx 10rpx 10rpx 10rpx;
}处理电话格式
美食列表”微信小程序中的每一项为一家美食商家的信息，其中包含美食商家的电话。该电话是从服务器端返回的，不适合直接显示在页面上，需要对电话进行处理之后显示在页面上。例如，将“12345678901”转换成“123-4567-8901”，以便于阅读。下面将通过WXS来实现电话格式的处理，具体实现步骤如下：
创建处理电话格式脚本
在项目根目录下创建utils文件夹，将处理电话函数封装到utils/tools.wxs文件中，
具体代码如下：
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
}页面引入脚本
在pages/shoplist/shoplist.wxml文件中引入WXS脚本，具体代码如下：
<wxs src="../../utils/tools.wxs" module="tools"></wxs>页面使用脚本
在pages/shoplist/shoplist.wxml文件中修改电话的代码，将电话经过处理之后再输出，
具体代码如下：
<text>电话：{{ tools.splitPhone(item.phone) }}</text>
实现上拉触底
上拉触底就是用户在进行上拉操作时，当页面即将到达底部时加载下一页数据，
具体实现步骤如下。
①在pages/shoplist/shoplist.json文件中配置上拉触底的距离为200px，
具体代码如下：
{
...原有代码
"onReachBottomDistance": 200
}②在页面上拉触底事件处理函数onReachBottom()中，让页码自增，
并调用getShopList()方法请求下一页的数据，
具体代码如下：
onReachBottom() {
console.log('上拉了')
// 页码自增
++this.data.page
// 请求下一页数据
this.getShopList()
},实现下拉刷新
当用户进行下拉操作时，如果到达了顶部，再进行下拉，可以刷新页面。接下来在页面中实现下拉刷新的效果，具体步骤如下。
①在pages/shoplist/shoplist.json文件中开启下拉刷新并配置相关样式，
具体代码如下：
{
...原有代码
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle": "dark"
}②通过onPullDownRefresh()函数监听用户下拉动作，
实现用户进行下拉操作时重置数据，并重新发起网络请求，具体代码如下：
onPullDownRefresh() {
// 需要重置的数据
this.setData({
shopList: []
})
this.page = 1
this.total = 0
// 重新发起数据请求
this.getShopList()
},完成版脚本
最终完成版的pages/shoplist/shoplist.js文件内容。
具体代码如下：
// pages/shoplist/shoplist.js
Page({
isLoading: false, // 当前是否正在加载数据
/**
* 页面的初始数据
*/
data: {
data: {
shopList: [], // 保存美食列表信息
page: 1, // 默认请求第1页的数据
pageSize: 10, // 默认每页请求5条数据
total: 0, // 数据总数，默认为0
},
page: 1,
pageSize: 10,
scrollTop: 0,
scrollHeight: 0
},
getShopList: function (cb) {
// 请求数据之前，展示加载效果，接口调用结束后，停止加载效果
this.isLoading = true
wx.showLoading({
title: '数据加载中...'
})
wx.request({
url: 'http://127.0.0.1/shoplist/index.php',
method: 'GET',
data: {
page: this.data.page,
pageSize: this.data.pageSize
},
success: res => {
//console.log(res.data)
this.setData({
shopList: res.data,
})
this.total = res.header['X-Total-Count'] - 0
},
complete: () => {
// 隐藏加载效果
wx.hideLoading()
// 阻止重复加载数据
this.isLoading = false
cb && cb()
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getShopList()
// 页面初始化 options为页面跳转所带来的参数
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
windowHeight: res.windowHeight,
windowWidth: res.windowWidth
})
}
});
},
// 定位数据
scroll: function (event) {
var that = this;
that.setData({
scrollTop: event.detail.scrollTop
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
console.log('下拉了')
// 需要重置的数据
this.setData({
shopList: []
})
this.data.page = 1
this.data.total = 0
// 重新发起数据请求
this.getShopList(() => {
wx.stopPullDownRefresh()
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
console.log('上拉了')
if (this.data.page * this.data.pageSize >= this.data.total) {
// 没有下一页的数据了
return wx.showToast({
title: '数据加载完毕！',
icon: 'none'
})
}
if (this.isLoading) {
return
}
// 页码自增
++this.data.page
// 请求下一页数据
this.getShopList()
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})功能截图
总结
微信小程序-美食列表开发笔记，实现美食列表通过后台获取数据动态展示列表，
并可通过上拉和下拉进行更新列表操作。