小程序交互练习 - 美食列表小程序开发笔记

目录

美食列表

功能描述

准备工作

创建项目

配置页面

配置导航栏

启动本地服务器

页面初始数据

设置获取美食数据

设置onload函数

设置项目配置

页面渲染

页面样式

处理电话格式

创建处理电话格式脚本

页面引入脚本

页面使用脚本

实现上拉触底

实现下拉刷新

完成版脚本

功能截图

总结

---

美食列表

“美食列表”微信小程序是一个展示美食名称、美食图片及美食商家的电话、地址和营业时间等信息的微信小程序。下面将对“美食列表”微信小程序进行详细讲解。

功能描述

美食列表包含多条美食信息，每条美食信息左侧为美食图片，右侧为美食详细信息，包括美食名称、电话、地址和营业时间。该页面具有上拉触底加载数据和下拉刷新两个功能，即当用户上拉美食列表页时，如果页面即将到达底部，会自动加载更多数据；当用户下拉页面时，如果到达顶部后进行下拉操作，可以刷新页面。

准备工作

创建项目

使用测试号，不使用模版。如下图：

 

配置页面

项目创建完成后，在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 = 1this.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 = truewx.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 = falsecb && 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 = 1this.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() {}
})

功能截图

总结

微信小程序-美食列表开发笔记，实现美食列表通过后台获取数据动态展示列表，

并可通过上拉和下拉进行更新列表操作。