微信小程序案例---本地生活

article/2025/9/18 15:30:23

文章目录

    • 首页效果以及实现步骤
      • 接口地址
      • 新建项目并梳理项目结构
      • 配置导航栏效果
      • 配置 tabBar 效果
      • 实现轮播图效果
      • 实现九宫格效果
      • 实现图片布局
    • 本地生活（列表页面）
      • 演示页面效果以及主要功能
      • 列表页面的 API 接口
      • 页面导航并传参
      • 获取并渲染列表数据
      • 上拉触底时加载下一页数据
      • 下拉刷新列表数据
      • 使用wxs处理手机号
    • 整个项目的获取途径

首页效果以及实现步骤

首页效果图：在这里插入图片描述

接口地址

获取轮播图数据列表的接口

【GET】https://www.escook.cn/slides

获取九宫格数据列表的接口

【GET】https://www.escook.cn/categories

新建项目并梳理项目结构

新建项目：

在app.json文件中新建home、message、contact、shoplist四个页面

"pages":["pages/home/home",// 首页"pages/message/message",// 消息页"pages/contact/contact",// 联系我们页"pages/shoplist/shoplist"// 列表页],

输入以上代码后按下enter键自动创建四个页面目录

项目结构图：在这里插入图片描述

配置导航栏效果

修改app.js文件中的window

"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#2b4b6b",// 导航栏颜色"navigationBarTitleText": "本地生活",// 导航栏标题"navigationBarTextStyle":"white"// 导航栏字体颜色
},

配置 tabBar 效果

在app.json文件中加入以下代码：

"tabBar": {"list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "./images/tabs/home.png","selectedIconPath": "./images/tabs/home-active.png"},{"pagePath": "pages/message/message","text": "消息","iconPath": "./images/tabs/message.png","selectedIconPath": "./images/tabs/message-active.png"},{"pagePath": "pages/contact/contact","text": "联系我们","iconPath": "./images/tabs/contact.png","selectedIconPath": "./images/tabs/contact-active.png"}]},

实现轮播图效果

在home.wxml文件中加入以下代码：

<!-- 轮播图区域 -->
<swiper indicator-dots circular autoplay interval="2000"><swiper-item wx:for="{{swiperList}}" wx:key="id"><image src="{{item.image}}"></image></swiper-item>
</swiper>

在home.wxss文件中加入以下代码：

/* 轮播图 */
swiper{height: 350rpx;
}
swiper image{width: 100%;height: 100%;
}

在home.js文件中加入以下代码：

/*** 页面的初始数据*/data: {// 存放轮播图数据的列表swiperList:[],},
/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getSwiperList()// 加载轮播图数据},// 获取轮播图数据的方法getSwiperList () {wx.request({url: 'https://www.escook.cn/slides',method:'GET',success:(res)=>{//   console.log(res);this.setData({swiperList:res.data})}})},

实现九宫格效果

在home.wxml文件中加入以下代码：

<!-- 九宫格区域 -->
<view class="grid-list"><view class="grid-item" wx:for="{{gridList}}" wx:key="id"><image src="{{item.icon}}"></image><text>{{item.name}}</text></view>
</view>

在home.wxss文件中加入以下代码：

/* 九宫格 */
.grid-list{display: flex;flex-wrap: wrap;border-left: 1rpx solid #efefef;border-top: 1rpx solid #efefef;
}
.grid-item{width: 33.33%;height: 200rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;border-bottom: 1rpx solid #efefef;border-right: 1rpx solid #efefef;box-sizing: border-box;
}
.grid-item image{width: 60rpx;height: 60rpx;
}
.grid-item text{font-size: 24rpx;margin-top: 10rpx;
}

在home.js文件中加入以下代码：

/*** 页面的初始数据*/data: {// 存放九宫格数据gridList:[],},
/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getGrideList()// 加载九宫格数据},
// 获取九宫格数据的方法   getGrideList() {wx.request({url: 'https://www.escook.cn/categories',method:'GET',success:(res)=>{// console.log(res);this.setData({gridList:res.data})}})},

实现图片布局

在home.wxml文件中加入以下代码：

<!-- 图片区域 -->
<view class="img-box"><image src="/images/link-01.png" mode="widthFix"></image><image src="/images/link-02.png" mode="widthFix"></image>
</view>

在home.wxss文件中加入以下代码：

/* 图片区域 */
.img-box{display: flex;padding: 20rpx 10rpx;justify-content: space-around;
}
.img-box image{width: 45%;
}

本地生活（列表页面）

演示页面效果以及主要功能

主要功能：

  • 页面导航并传参
  • 上拉触底时加载下一页数据
  • 下拉刷新列表数据

演示页面效果：在这里插入图片描述

列表页面的 API 接口

以分页的形式，加载指定分类下商铺列表的数据：

  • 接口地址：https://www.escook.cn/categories/:cate_id/shopsURL
  • 地址中的 :cate_id 是动态参数，表示分类的 Id

请求方式

  • GET 请求

请求参数

  • _ page 表示请求第几页的数据
  • _ limit 表示每页请求几条数据

页面导航并传参

在app.json文件下的pages中创建列表页：

  "pages":["pages/shoplist/shoplist"],

修改home.wxml文件中的九宫格代码（变为链接）：

<!-- 九宫格区域 -->
<view class="grid-list"><navigator class="grid-item" wx:for="{{gridList}}" wx:key="id" url="/pages/shoplist/shoplist?id={{item.id}}&title={{item.name}}"><!--添加url属性：跳转路径并携带九宫格数据中的id和title参数--><image src="{{item.icon}}"></image><text>{{item.name}}</text></navigator>
</view>

在shoplist.js文件中动态添加列表页的标题

    /*** 页面的初始数据*/data: {query:{},// 对首页传递参数进行转存},
/**/*** 生命周期函数--监听页面加载*/onLoad(options) {this.setData({query:options})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {wx.setNavigationBarTitle({title: this.data.query.title})},

获取并渲染列表数据

在shoplist.js文件中初始化数据

    /*** 页面的初始数据*/data: {query:{},shopList:[],page:1,pageSize:10,total:0,isloading:false},

获取列表数据

    /*** 生命周期函数--监听页面加载*/onLoad(options) {this.getShopList()},  // 获取列表数据getShopList(){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)=>{//   console.log(res);this.setData({shopList:[...this.data.shopList,...res.data],total:res.header['X-Total-Count']-0})},

渲染页面，在shoplist.wxml文件中添加以下代码

<view class="shop-item" wx:for="{{shopList}}" wx:key="id"><view class="thumb"><image src="{{item.images[0]}}"></image></view><view class="info"><text class="shop-title">{{item.name}}</text><text>电话：{{item.phone}}</text><text>地址：{{item.address}}</text><text>营业时间：{{item.businessHours}}</text></view>
</view>

添加列表页面样式

.shop-item{display: flex;padding: 15rpx;border: 1rpx solid #efefef;border-radius: 8rpx;margin: 15rpx;box-shadow: 1rpx 1rpx 15rpx #dddddd;
}
.thumb image{width: 250rpx;height: 250rpx;display: block;margin-right: 15rpx;
}
.info{display: flex;flex-direction: column;justify-content: space-around;font-size: 24rpx;
}
.shop-title{font-weight: bold;
}

上拉触底时加载下一页数据

加载下一页数据处理

    getShopList(cb){this.setData({isLoading:true})// 展示roading效果wx.showLoading({title: '数据加载中...',})// 请求数据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)=>{//   console.log(res);this.setData({shopList:[...this.data.shopList,...res.data],total:res.header['X-Total-Count']-0})},complete:()=>{// 隐藏loading效果wx.hideLoading(),this.setData({isLoading:false})cb && cb()// cb回调函数}})},

    /*** 页面上拉触底事件的处理函数*/onReachBottom() {if(this.data.page * this.data.pageSize >= this.data.total){// 没有下一页数据（判断所有数据是否显示完）return wx.showToast({title: '数据加载完毕!',icon:'none'})}if(this.data.isLoading)return // 判断当前是否在请求数据this.setData({// 页码值+1page:this.data.page + 1})this.getShopList()// 获取下一组数据},

在shoplist.json文件中添加以下代码：

{"usingComponents": {},// 引入自定义组件"onReachBottomDistance": 200,// 设置上拉触发距离
}

下拉刷新列表数据

在shoplist.json文件中添加以下代码：

{"enablePullDownRefresh": true,// 开启下拉刷新"backgroundColor": "#efefef",// 下拉刷新背景颜色"backgroundTextStyle": "dark"// 下拉刷新背景样式
}

下拉刷新重新获取第一页数据

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

使用wxs处理手机号

在util.js文件中创建tools.wxs文件，并添加下列代码：

function splitPhone(str){if(str.length!=11) return strvar arr = str.split('')arr.splice(3,0,'-')arr.splice(8,0,'-')return arr.join('')
}
// 对外暴露splitPhone()方法
module.exports = {splitPhone:splitPhone
}

在shoplist.wxml文件中引入wxs脚本

<wxs src="../../utils/tools.wxs" module="tools"></wxs>

在shoplist.wxml文件中使用wxs脚本（修改电话格式）

		<text>电话：{{tools.splitPhone(item.phone)}}</text>

整个项目的获取途径

项目中图片获取链接

整个项目下载链接


http://chatgpt.dhexx.cn/article/N9rB7Pd4.shtml

相关文章

微信小程序--操作示例2

微信小程序--操作示例2

微信小程序--商城首页 我们首先有一个商城的接口 调用商城中首页所需要的一些数据 例如&#xff1a; onLoad: function () {var that this;//请求服务器时间戳wx.request({url: http://www.tp.com/index.php?mApi&cBase&agetServerTime, //请求地址success: fu…
阅读更多...
微信小程序官方示例

微信小程序官方示例

微信小程序官方示例 下载微信客户端版本号&#xff1a;6.3.27 及以上&#xff0c;只有小程序绑定的开发者有权限扫码体验。下载源码 版本20161010
阅读更多...
什么是云开发？小程序实例超详细演示～

什么是云开发？小程序实例超详细演示～

学习视频&#xff1a; 八分钟读懂云开发_哔哩哔哩_bilibili小姐姐带你30分钟创建并上线小程序项目【云开发实战】_哔哩哔哩_bilibili 参考资料&#xff1a; 微信开放文档 (qq.com)云开发_百度百科 (baidu.com) 推荐阅读&#xff1a; 云原生推动全云开发与实践 - 知乎 (zhihu.co…
阅读更多...
微信小程序入门教程+案例demo

微信小程序入门教程+案例demo

微信小程序入门教程案例demo 尊重原创&#xff0c;转载请注明出处&#xff1a;原文查看惊喜更多 http://blog.csdn.net/qq137722697 首先摆在好姿态&#xff0c;——微信小程序开发也就那么回事。你只需要一点点css&#xff08;真的只要一点点&#xff09;的基础就可以了。 认清…
阅读更多...
微信小程序开发 | API应用案例（下）

微信小程序开发 | API应用案例（下）

API应用案例&#xff08;下&#xff09; 6.1【案例5】模拟时钟6.1.1 案例分析6.1.2 前导知识6.1.3 钟表页面布局6.1.4 钟表页面绘制 6.2【案例6】罗盘动画6.2.1 案例分析6.2.2 前导知识6.2.3 设计罗盘页面布局6.2.4 手指触摸旋转罗盘6.2.5 单击按钮操作罗盘 6.3【案例7】文件上…
阅读更多...
使用微信小程序开发弹出框应用实例详解

使用微信小程序开发弹出框应用实例详解

1 2 3 4 5 view class"container" class"zn-uploadimg"> <button type"primary"bindtap"showok">消息提示框</button> <button type"primary"bindtap"modalcnt">模态弹窗</button&g…
阅读更多...
小程序代码示例整理

小程序代码示例整理

以下是分享了一部分小程序的代码示例&#xff0c;希望能够帮助到你们&#xff0c;抓紧收藏吧 微信小程序知乎日报 https://github.com/myronliu347/wechat-app-zhihudaily 微信小程序购物车案例 https://github.com/SeptemberMaples/wechat-weapp-demo 微信小程序–聊天室…
阅读更多...
微信小程序开发实例

微信小程序开发实例

一、注册小程序账号 1.进入微信公众平台&#xff08;https://mp.weixin.qq.com/&#xff09;&#xff0c;注册小程序账号&#xff0c;根据提示填写对应的信息即可。2.注册成功后进入首页&#xff0c;在 小程序发布流程->小程序开发与管理->配置服务器中&#xff0c;点击…
阅读更多...
微信小程序之登录界面示例

微信小程序之登录界面示例

注&#xff1a;这里使用的是原生微信小程序 微信小程序之登录界面示例 使用wxss和wxml index.wxml文件中代码 <view class"v1"><!-- v2父容器 子view使用绝对布局 --><view class"v2"><view class"dltext">登录<…
阅读更多...
一个微信小程序开发示例

一个微信小程序开发示例

一个微信小程序开发示例&#xff08;豆瓣电影&#xff09; 新版本&#xff08;不包含工作流&#xff09;请移步至&#xff1a;https://github.com/zce/weapp-douban当前仓库会暂缓更新&#xff0c;主要留下来给大家答疑需要基础教程的朋友们稍等一阵吧&#xff0c;目前有计划重…
阅读更多...
微信小程序实例系列

微信小程序实例系列

实战 【微信小程序】---- redux 在原生微信小程序的使用实例【微信小程序】---- weapp-redux的使用文档【微信小程序】---- Promise.then(success, fail)执行顺序的问题【微信小程序】---- 监听页面停止滚动【微信小程序】---- CustomBar 公用组件封装微信小程序----开发rui-s…
阅读更多...
微信小程序作品实例

微信小程序作品实例

目录 简介 作品详情 作品代码 一、主页界面 1、WXML文件: 2、WXSS文件: 3、JS文件 4、JSON文件: 5、补充 二、购物车界面 1、WXML文件 3、JS文件 4、JSON文件 三、分类界面和个人中心界面 简介 这是我在学习完微信小程序后&#xff0c;写的一个小案例&#xff0c;是…
阅读更多...
微信小程序开发之——微信小程序示例

微信小程序开发之——微信小程序示例

一 概述 除了WeUI组件库&#xff0c;官方进行了扩展&#xff0c;包含组件库、扩展能力、接口和云开发示例 项目地址在线预览码预览界面miniprogram-demo 二 如何使用小程序示例 2.1 小程序示例——tabs 官方示例下的tabs位置 miniprogram-demo-master\miniprogram\page\we…
阅读更多...
微信小程序相关操作示例

微信小程序相关操作示例

微信小程序相关操作示例 wxml-写页面for指令绑定事件数据绑定获取当前用户相关信息的方式跳转展示用户信息表单提交键盘输入的控制 js-写方法初始数据&#xff08;字典&#xff09;&#xff1a;方法函数&#xff1a;存储图片到云开发平台存储访问服务器的request方式获取当前用…
阅读更多...
小程序-demo：小程序示例

小程序-demo：小程序示例

ylbtech-小程序-demo&#xff1a;小程序示例 1.返回顶部 0、 1、app.js const openIdUrl require(./config).openIdUrlApp({onLaunch: function () {console.log(App Launch)},onShow: function () {console.log(App Show)},onHide: function () {console.log(App Hide)},glo…
阅读更多...
Toast与Snackbar的那点事

Toast与Snackbar的那点事

背景 Toast是Android平台上的常用技术。从用户角度来看&#xff0c;Toast是用户与App交互最基本的提示控件&#xff1b;从开发者角度来看&#xff0c;Toast是开发过程中常用的调试手段之一。此外&#xff0c;Toast语法也非常简单&#xff0c;仅需一行代码。基于简单易用的优点…
阅读更多...
Flutter之SnackBar原理详解

Flutter之SnackBar原理详解

初次学习SnackBar控件&#xff0c;第一反应就是这货怎么感觉跟Android的Toast一样&#xff01;使用起来确实简单&#xff0c;但是其内部原理扒拉出来到时能学到一点东西&#xff0c;下面就细细的剖析这个组件。 Snackbar的作用就是在屏幕的底部展示一个简短的消息,与此同时&am…
阅读更多...
Android Material Design 系列之 Snackbar 使用详解

Android Material Design 系列之 Snackbar 使用详解

前言 本文是 Material Design 系列第二篇&#xff1a;SnackBar 的提出实际上介于 Toast 和 Dialog 的中间产物&#xff0c;SnackBar 提供有关操作的轻量级反馈&#xff0c;它们在移动设备的屏幕底部显示一条简短消息。SnackBar 出现在屏幕上所有其他元素的上方&#xff0c;一次…
阅读更多...
Android中Snackbar的介绍以及使用

Android中Snackbar的介绍以及使用

Android中Snackbar的介绍以及使用 介绍 Snackbar可以说是Toast的升级版&#xff0c;不仅有显示信息的功能&#xff0c;还可以添加一个Action&#xff0c;实现点击功能&#xff0c;可以右滑删除。 效果图 Snackbar是Android Support Design Library库支持的一个控件&#xff0c…
阅读更多...
安卓之SnackBar

安卓之SnackBar

SnackBar SnakeBar与Toast相似&#xff0c;不过SnakeBar可以与用户进行交互。 不过首先需要在app/bulid.gradle中添加一句依赖&#xff0c;操作方法如下 点击这个灯泡&#xff0c;选择Add Library dependency然后添加下面的依赖 implementation com.android.support:design:2…
阅读更多...
推荐文章

Copyright @ 2022~2023