小程序 - 美食列表

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

目录

美食列表

功能描述

准备工作

创建项目

配置页面

配置导航栏

启动本地服务器

页面初始数据

设置获取美食数据

设置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() {}
})

功能截图

总结

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/63248.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt6.8 QGraphicsView鼠标坐标点偏差

ui文件拖放QGraphicsView&#xff0c;src文件定义QGraphicsScene赋值给图形视图。 this->scene new QGraphicsScene();ui.graph->setScene(this->scene);对graphicview过滤事件&#xff0c;只能在其viewport之后安装&#xff0c;否则不响应。 ui.graph->viewport…

springboot/ssm购物系统Java代码web项目在线购物商城电商源码

springboot/ssm购物系统Java代码web项目在线购物商城电商源码 基于springboot(可改ssm)vue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;m…

若依 ruoyi VUE el-select 直接获取 选择option 的 label和value

1、最新在研究若依这个项目&#xff0c;我使用的是前后端分离的方案&#xff0c;RuoYi-Vue-fast(后端) RuoYi-Vue-->ruoyi-ui(前端)。RuoYi-Vue-fast是单应用版本没有区分那么多的modules 自己开发起来很方便&#xff0c;这个项目运行起来很方便&#xff0c;但是需要自定义的…

基于队列(Queue)的部分笔试题

1. 设计一个循环队列&#xff08;环形队列&#xff09; 问题描述&#xff1a; 设计一个支持以下操作的队列&#xff1a; enqueue(int x)&#xff1a;将元素 x 添加到队尾。 dequeue()&#xff1a;移除并返回队头元素。 peek()&#xff1a;返回队头元素&#xff0c;但不移除它…

springboot事务手动回滚报错

捕捉异常之后手动标记回滚事务 TransactionAspectSupport.currentTransactionStatus().setRollbackOnly(); 没有嵌套事务&#xff0c;还是报Transaction rolled back because it has been marked as rollback-only异常错误 查看错误堆栈&#xff0c;service调用的方法外层还套…

Pytorch使用手册- TorchVision目标检测微调Tutorial的使用指南(专题十二)

这篇教程的目标是对一个预训练的 Mask R-CNN 模型进行微调,应用于 Penn-Fudan 行人检测与分割数据集。该数据集包含 170 张图像,里面有 345 个行人实例,我们将通过这个教程来演示如何使用 torchvision 中的新特性,训练一个面向自定义数据集的目标检测和实例分割模型。 注意…

使用 LlamaFactory 结合开源大语言模型实现文本分类:从数据集构建到 LoRA 微调与推理评估

文章目录 背景介绍文本分类数据集Lora 微调模型部署与推理期待模型的输出结果 文本分类评估代码 背景介绍 本文将一步一步地&#xff0c;介绍如何使用llamafactory框架利用开源大语言模型完成文本分类的实验&#xff0c;以 LoRA微调 qwen/Qwen2.5-7B-Instruct 为例。 文本分类…

发论文参考文献部分怎么注明数据集出处gitee

见的参考文献标注格式&#xff08;如APA、MLA、Chicago等&#xff09;&#xff0c;电子文献或网络资源的标注通常包括作者&#xff08;或组织&#xff09;、标题、发布年份、获取路径&#xff08;URL&#xff09;等信息。 二、具体步骤 查找数据集信息&#xff1a; 在Gitee上找…

ARM内核与单片机

1.单片机硬件架构如下所示&#xff1a;各种硬件通过总线进行连接。 2.M4内核架构 3.单片机如何工作&#xff1a; 4.CPU是通过读写寄存器来控制GPIO的 5.GPIO的硬件框架&#xff1a;一共有8种模式 &#xff08;1&#xff09;推挽/推挽复用输出。下图先看图1&#xff0c;如果输入…

vue3:mitt

在 Vue 3 中使用 mitt 进行事件总线的实现非常简单。mitt 是一个轻量级的事件库&#xff0c;适用于 Vue 项目中的组件间通信。 实现自定义组件直接相互传值&#xff0c;父到子&#xff0c;子到子&#xff0c;子对子&#xff0c;子对孙&#xff0c;想怎么传就怎么传。和android…

PHP 命令执行漏洞学习记录

PHP 命令执行 命令函数 作用 例子 system() 执行外部程序,并且显示输出 system(whoami) exec() 执行一个外部程序 echo exec(whoami); shell_exec() 通过shell环境执行命令,并且将完整的输出以字符串的形式返回 echo shell_exec(whoami); passthru() 执行外部程序…

VSCode GDB远程嵌入开发板调试

VSCode GDB远程嵌入式开发板调试 一、原理 嵌入式系统中一般在 PC端运行 gdb工具&#xff0c;源码也是在 PC端&#xff0c;源码对应的可执行文件放到开发板中运行。为此我们需要在开发板中运行 gdbserver&#xff0c;通过网络与 PC端的 gdb进行通信。因此要想在 PC上通过 gdb…

【机器学习】机器学习的基本分类-无监督学习(Unsupervised Learning)

无监督学习&#xff08;Unsupervised Learning&#xff09; 无监督学习是一种机器学习方法&#xff0c;主要用于没有标签的数据集。其目标是从数据中挖掘出潜在的结构和模式。常见的无监督学习任务包括 聚类、降维、密度估计 和 异常检测。 1. 无监督学习的核心目标 1.1 聚类…

【Python]深入Python日志管理:从logging到分布式日志追踪的完整指南

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 日志是软件开发中的核心部分,尤其在分布式系统中,日志对于调试和问题定位至关重要。本篇文章将从Python标准库的logging模块出发,逐步探讨日志管理的最佳实践,涵盖日志配置、日志分层、日志格式化等基…

专业140+总分420+上海交通大学819考研经验上交电子信息与通信工程,真题,大纲,参考书。博睿泽信息通信考研论坛,信息通信考研Jenny

考研结束&#xff0c;专业819信号系统与信号处理140&#xff0c;总分420&#xff0c;终于梦圆交大&#xff0c;高考时敢都不敢想目标&#xff0c;现在已经成为现实&#xff0c;考研后劲很大&#xff0c;这一年的复习经历&#xff0c;还是历历在目&#xff0c;整理一下&#xff…

【NLP修炼系列之Bert】Bert多分类多标签文本分类实战(附源码下载)

引言 今天我们就要用Bert做项目实战&#xff0c;实现文本多分类任务和我在实际公司业务中的多标签文本分类任务。通过本篇文章&#xff0c;可以让想实际入手Bert的NLP学习者迅速上手Bert实战项目。 1 项目介绍 本文是Bert文本多分类和多标签文本分类实战&#xff0c;其中多分…

[Redis#17] 主从复制 | 拓扑结构 | 复制原理 | 数据同步 | psync

目录 主从模式 主从复制作用 建立主从复制 主节点信息 从节点信息 断开主从复制关系 主从拓扑结构 主从复制原理 1. 复制过程 2. 数据同步&#xff08;PSYNC&#xff09; 3. 三种复制方式 一、全量复制 二、部分复制 三、实时复制 四、主从复制模式存在的问题 在…

【青牛科技】拥有两个独立的、高增益、内部相位补偿的双运算放大器,可适用于单电源或双电源工作——D4558

概述&#xff1a; D4558内部包括有两个独立的、高增益、内部相位补偿的双运算放大器&#xff0c;可适用于单电源或双电源工作。该电路具有电压增益高、噪声低等特点。主要应用于音频信号放大&#xff0c;有源滤波器等场合。 D4558采用DIP8、SOP8的封装形式 主要特点&#xff…

泰坦军团品牌焕新:LOGO变更开启电竞细分市场新篇章

深圳世纪创新显示电子有限公司旗下的高端电竞显示器品牌泰坦军团&#xff0c;上月发布通告&#xff0c;自2024年6月起已陆续进行品牌升级和LOGO变更。 泰坦军团自2015年成立以来&#xff0c;凭借先进的技术和顶级的工业设计&#xff0c;已成为众多年轻人首选的游戏显示器品牌&…

HALCON 算子 之 阈值分割算子

文章目录 什么是阈值分割&#xff1f;为什么要阈值分割&#xff1f;如何进行阈值分割&#xff1f;全局threshold —— 全局固定阈值分割auto_threshold —— 全局自动阈值分割fast_threshold —— 快速全局阈值分割watersheds_threshold —— 分水岭盆地阈值分割 局部dyn_thres…