【微信小程序】-- 案例 - 本地生活（二十）

news2025/1/15 6:30:10

请添加图片描述

  • 💌 所属专栏：【微信小程序开发教程】

  • 😀 作  者：我是夜阑的狗🐶

  • 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！

  • 💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘

文章目录

  • 前言
  • 一、案例 - 本地生活
      • 1、首页效果以及实现步骤
  • 二、项目结构
      • 1、新建项目
      • 2、梳理项目结构
  • 三、配置导航栏效果
  • 四、配置 tabBar 效果
  • 五、实现轮播图效果
      • 1、获取轮播图数据
      • 2、渲染轮播图
  • 六、实现九宫格效果
      • 1、获取九宫格数
      • 2、渲染九宫格
  • 七、实现图片布局
  • 总结

前言

  大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第20篇文章;
  今天开始学习微信小程序的第十一天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
  专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。

一、案例 - 本地生活

  前面已经介绍了小程序的网络数据请求，通过栗子学习了在小程序中如何发起 GET 和 POST 请求。接下来通过一个案例将前面学习到知识进行巩固。话不多说，让我们原文再续，书接上回吧。

请添加图片描述

1、首页效果以及实现步骤

  可以先来看一下要实现的效果图，图中有轮播图、九宫格、导航栏和tabBar等效果，如下所示：

在这里插入图片描述

  想要实现上面的那个效果，实现步骤可分为 6 个步骤：

  • Step 1、首先新建一个项目并且梳理整个项目结构；
  • Step 2、配置导航栏效果，修改背景、标题等属性；
  • Step 3、配置 tabBar 效果，添加图片、选中等样式，总共要实现3个 tarBar；
  • Step 4、在页面主体区域实现轮播图效果；
  • Step 5、在页面主体区域实现九宫格区域效果；
  • Step 6、最后实现图片布局；

二、项目结构

1、新建项目

  虽然前面已经学习过了如何新建项目，但是还要操作一遍加深印象。首先打开微信开发者工具，点击加号按钮进行创建项目。

在这里插入图片描述

  接下来就是填写项目信息，填好项目名称和目录，AppID是前面注册过的，不清楚的可以看一下【微信小程序】–注册小程序账号&安装开发者工具（一）。然后后端服务选择不使用云服务，这两种开发模式是不同的，这里先学习不使用云服务。（注意: 你要选择一个空的目录才可以创建项目）

在这里插入图片描述

  后面就是确认编程语言了，这里是以JavaScript为例。选择完之后点击 确认 按钮即可。

2、梳理项目结构

  从项目效果图可以知道，需要新建三个页面。删除小程序的默认页面 index 和 logs ，创建 home 、message 和 contact 页面，具体代码如下：

app.json

{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
}

  代码重新编译之后就会生成三个页面，home 为主页面，实际效果如下所示：

在这里插入图片描述

三、配置导航栏效果

   页面创建之后，接下来就是要从导航栏开始配置。通过修改 app.json 中 window 属性来配置导航栏效果，具体代码如下所示：

app.json

{
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "本地生活CSH",
    "navigationBarTextStyle":"white"
  },
}

   修改完之后重新编译就可以其导航栏效果：

在这里插入图片描述

四、配置 tabBar 效果

  首先把下载好的 images 资源，拷贝到小程序项目根目录中，图片内容如下所示：

在这里插入图片描述

  打开 app.json 配置文件，和 pages、window 平级，新增 tabBar 节点，其次 tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象，最后在 list 数组中，新增每一个 tab 项的配置对象。具体代码如下所示：

app.json

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

   修改完之后重新编译就可以看到 tarBar 效果：

在这里插入图片描述

五、实现轮播图效果

  这里需要通过接口来获取轮播图的数据，从而来渲染轮播图效果。获取轮播图数据列表的接口：

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

1、获取轮播图数据

  知道接口之后，就可以通过 wx.request 来获取数据，由于不需要对服务器进行提交数据，所以data属性可以省略。如果不知道返回的数据是什么的话，可以用 console.log 打印出来看看。

home.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 存放轮播图数据的列表
    swiperList: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSwiperList();
  },

  /**
   * 获取轮播图数据的方法
   */
  getSwiperList(){
    wx.request({
      url: 'https://www.escook.cn/slides',
      method: "GET",
      success: (res) =>{
        console.dir(res.data);
        this.setData({
          swiperList: res.data
        })
      }
    })
  }
})

  这样就能获取到轮播图的数据，来看一下实际效果：

请添加图片描述

  从图中可以看出，服务器返回的数据 res.data 被打印出来了，AppData 中 swiperList 数据被赋上了值，说明已经成功获取数据了。

2、渲染轮播图

  前面已经获取到了轮播图的数据，接下来就是渲染轮播图效果并进行美化样式。

home.wxml

  将轮播设置为循环自动播放。

<swiper indicator-dots circular indicator-color="white" indicator-active-color="gray"
autoplay interval="2000">
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

home.wxss

  这里的单位尽量使用 rpx。

swiper {
  height: 350rpx;
}
swiper image{
  width: 100%;
  height: 100%;
}

  这样就完成轮播图的渲染，来看一下实际效果：

请添加图片描述

六、实现九宫格效果

  与前面轮播图一样，也需要通过接口来获取九宫格的数据，从而来渲染九宫格图效果。获取九宫格图数据列表的接口：

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

1、获取九宫格数

  通过 wx.request 来获取数据，由于不需要对服务器进行提交数据，所以data属性可以省略。如果不知道返回的数据是什么的话，可以用 console.log 打印出来看看。

home.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 存放轮播图数据的列表
    swiperList: [],
   	// 存放九宫格数据的列表
    gridList:[]    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSwiperList();
    this.getGridList();
  },

  /**
   * 获取九宫格数据的方法
   */
  getGridList(){
    wx.request({
      url: 'https://www.escook.cn/categories',
      method:"GET",
      success: (res) =>{
        console.dir(res.data);
        this.setData({
          gridList: res.data,
        })
      }
    })
  }
})

  这样就能获取到九宫格的数据，来看一下实际效果：

请添加图片描述

2、渲染九宫格

  前面已经获取到了轮播图的数据，接下来就是渲染九宫格区域的布局并进行美化样式。

home.wxml

  有 id 的话尽量用 id 当 key。

<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

  这里的单位尽量使用 rpx。

.grid-list{
  /* 开启flex布局 */
  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-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  /* 改变box方式 */
  box-sizing: border-box;
}
.grid-item image{
  width: 60rpx;
  height: 60rpx;
}
.grid-item text{
  font-size: 24rpx;
  margin-top: 10rpx;
}

  这样就完成九宫格的渲染，来看一下实际效果：

在这里插入图片描述

七、实现图片布局

  前面基本上已经完成大部分的效果，接下来就剩下最后两张图片的设置和美化了，具体代码如下所示：

home.wxml

  有 id 的话尽量用 id 当 key。

<view class="img-box">
  <image src="/images/link-01.png"></image>
  <image src="/images/link-02.png"></image>
</view>

home.wxss

.img-box{
  display: flex;
  /* 添加间距 上下， 左右*/
  padding: 20rpx 10rpx;
  justify-content: space-around;
}

.img-box image{
  width: 45% ;
}

  到了这里基本上就已经完成整个案例了，来看一下完整效果：

在这里插入图片描述

总结

  感谢观看，这里就是案例 - 本地生活的介绍，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹

在这里插入图片描述

  也欢迎你，关注我。👍 👍 👍

  原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉

更多专栏订阅:

  • 😀 【LeetCode题解（持续更新中）】
  • 🚝 【Java Web项目构建过程】
  • 💛 【微信小程序开发教程】
  • ⚽ 【JavaScript随手笔记】
  • 🤩 【大数据学习笔记（华为云）】
  • 🦄 【程序错误解决方法（建议收藏）】
  • 🚀 【软件安装教程】



订阅更多，你们将会看到更多的优质内容！！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【数据结构初阶】堆排序

【数据结构初阶】堆排序

目录 前言 概念 堆排序的实现 1.建堆 &#xff08;1&#xff09;堆向上调整算法 &#xff08;2&#xff09;堆的向下调整算法 2. 利用堆删除思想来进行排序 3.堆排序的时间复杂度 4.源码 总结 前言 前边我们学习了堆的实现&#xff0c;对堆的每个接口都进行了详细的讲…
阅读更多...
js中getBoundingClientRect()方法

js中getBoundingClientRect()方法

getBoundingClientRect()返回值是一个 DOMRect 对象&#xff0c;是包含整个元素的最小矩形&#xff08;包括 padding 和 border-width&#xff09;。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。除了 …
阅读更多...
高性能网络I/O框架-netmap源码分析

高性能网络I/O框架-netmap源码分析

前几天听一个朋友提到这个netmap&#xff0c;看了它的介绍和设计&#xff0c;确实是个好东西。其设计思想与业界不谋而合——因为为了提高性能&#xff0c;几个性能瓶颈放在那里&#xff0c;解决方法自然也是类似的。 netmap的出现&#xff0c;它既实现了一个高性能的网络I/O框…
阅读更多...
【Storm】【五】Storm集成Kafka

【Storm】【五】Storm集成Kafka

Storm集成Kafka 一、整合说明二、写入数据到Kafka三、从Kafka中读取数据一、整合说明 Storm 官方对 Kafka 的整合分为两个版本&#xff0c;官方说明文档分别如下&#xff1a; Storm Kafka Integration : 主要是针对 0.8.x 版本的 Kafka 提供整合支持&#xff1b;Storm Kafka …
阅读更多...
English Learning - L2-3 英音地道语音语调 小元音 [ʌ] [ɒ] [ʊ] [ɪ] [ə] [e] 2023.02.27 周一

English Learning - L2-3 英音地道语音语调 小元音 [ʌ] [ɒ] [ʊ] [ɪ] [ə] [e] 2023.02.27 周一

English Learning - L2-3 英音地道语音语调 小元音 [ʌ] [ɒ] [ʊ] [ɪ] [ə] [e] 2023.02.27 周一课前活动练习方法大小元音总结小元音准备工作[ʌ] 中元音发音技巧对应单词的发音对应句子的发音常见的字母组合[ɒ] 后元音发音技巧对应单词的发音对应句子的发音常见的字母组合…
阅读更多...
Spring——什么是事务？传播行为？事务隔离级别有哪些？

Spring——什么是事务？传播行为？事务隔离级别有哪些？

思维导图一、什么是事务&#xff1f;多条DML要么同时成功&#xff0c;要么同时失败Transaction&#xff08;tx&#xff09;二、事务的四个过程&#xff1a;开启事务&#xff08;start transaction&#xff09;执行核心业务代码提交事务&#xff08;如果核心业务处理过程中没有出…
阅读更多...
真香，Grafana开源Loki日志系统取代ELK？

真香，Grafana开源Loki日志系统取代ELK？

一、Loki是什么&#xff1f; Loki是由Grafana Labs开源的一个水平可扩展、高可用性&#xff0c;多租户的日志聚合系统的日志聚合系统。它的设计初衷是为了解决在大规模分布式系统中&#xff0c;处理海量日志的问题。Loki采用了分布式的架构&#xff0c;并且与Prometheus、Graf…
阅读更多...
【前端】一个更底层库-React基础知识点

【前端】一个更底层库-React基础知识点

目录Reat是什么&#xff1f;为什么要使用React类库比较容易学习&#xff0c;API非常少。组件内聚&#xff0c;容易组合原生组件和自定义组件融合渲染状态/属性驱动全局更新commonjs生态圈/工具栏完善React基础知识JSX概述JSX嵌入变量Event事件组合组合CHILDREN总结大家好&#…
阅读更多...
02-问题思考维度：抓住核心用户、场景化分析、需求收集与辨别、用户故事

02-问题思考维度：抓住核心用户、场景化分析、需求收集与辨别、用户故事

文章目录2.1 抓住核心用户2.1.1 为什么要抓住核心用户2.1.2 核心用户的特征根据不同维度&#xff0c;描述核心用户2.1.3 如何抓住核心用户2.2 场景化分析2.2.1 场景五要素2.2.2 场景化分析方法2.2.3 场景化分析方法的应用2.3 需求收集与辨别2.3.1 需求的定义及层次2.3.2 需求收…
阅读更多...
汇编相关问题

汇编相关问题

汇编语言期末复习题DX&#xff1a;单项选择题 DU&#xff1a;多项选择题 TK&#xff1a;填空题 MC&#xff1a;名词解释 v JD&#xff1a;简答题 CXFX&#xff1a;程序分析题 CXTK&#xff1a;程序填空题 BC&#xff1a;编程题第1章&#xff1a;基础知识1、在汇编语言程序的开发…
阅读更多...
Vue2.0开发之——购物车案例-axios请求列表数据(45)

Vue2.0开发之——购物车案例-axios请求列表数据(45)

一 概述 项目导入axios HTTP 库axios请求数据列表将请求到的数据转存到data中 二 项目导入axios HTTP 库 2.1 axios介绍 Axios是一个基于promise 的 HTTP 库&#xff0c;可以用在浏览器和 node.js中 2.2 axios项目地址 https://www.npmjs.com/package/axios 2.3 axios安装…
阅读更多...
excel的Countif函数使用详细教程

excel的Countif函数使用详细教程

excel的Countif函数使用详细教程本教程通过七个示例讲解Countif函数使用教程&#xff0c;其中条件如何设置模糊值&#xff0c;统计固定长度的文本&#xff0c;统计大于某个值&#xff0c;统计等于某个值的&#xff0c;统计日期等。Countif函数作用&#xff1a;对指定单元格区域…
阅读更多...
pycharm关联github、新建以及更新仓

pycharm关联github、新建以及更新仓

此处已经默认你安装了git以及pycharm,这篇文章将会教给大家如何利用pycharm管理自己的github. 目录 pycharm关联github设置 Github创建新的仓 仓库的更新 pycharm:2022。不同版本界面略有不同。 pycharm关联github设置 设置PyCharm&#xff0c;打开File --> Settings -…
阅读更多...
SAP 如何批量扩充（复制）科目到其他子公司（T-CODE: FS15）？

SAP 如何批量扩充（复制）科目到其他子公司（T-CODE: FS15）？

SAP 科目主数据管理常用的事务代码&#xff1a; 科目的创建分科目表层&#xff08;FSP0&#xff09;&#xff1b; 公司代码层&#xff08;FSS0&#xff09;&#xff1b; 集中创建&#xff08;FS00&#xff09;。 现假设我们成立一家新的子公司&#xff0c;需要把母公司的科目批…
阅读更多...
博客系统程序(页面设计)

博客系统程序(页面设计)

咱们学习javaEE的目的就是完成一个网站.在当前学习的基础上,已经可以完成我们的博客系统的页面的设计了!!!首先我们要进行统筹规划:首先我们的博客页面将会有4个页面:1.博客列表页2.博客详情页显示一个博客的具体内容:3.登录页就是用户输入用户名和页面的地方4.博客编辑页发布新…
阅读更多...
1、JAVA 开发环境搭建 - JDK 的安装配置

1、JAVA 开发环境搭建 - JDK 的安装配置

文章目录一、下载 JDK81、官网地址&#xff1a;[**https://www.oracle.com**](https://www.oracle.com)二、安装 JDK1、鼠标右键安装包&#xff0c;以管理员身份运行(无脑下一步即可)2、细节说明三、配置环境变量1、为啥要配置环境变量呢&#xff1f;2、原因分析3、配置环境变量…
阅读更多...
SpringMVC的完整执行流程

SpringMVC的完整执行流程

Java知识点总结&#xff1a;想看的可以从这里进入 目录2.5、SpringMVC流程2.5、SpringMVC流程 Spring MVC 框架主要由 DispatcherServlet、处理器映射、控制器、视图解析器、视图等组成&#xff0c;它和其他的MVC框架一样&#xff0c;以请求为驱动&#xff0c;围绕Servlet分派…
阅读更多...
顺序表（一篇带你掌握顺序表）

顺序表（一篇带你掌握顺序表）

目录 一、顺序表是什么 1.1 概念 1.2 分类 1.3 结构 二、顺序表的基本操作 2.1 前绪准备 2.2 初始化 2.3 扩容 2.5 尾插 2.6 打印 2.7 尾删 2.8 头插 2.9 头删 2.10 在pos位置插入 2.11 删除pos位置的数据 2.12 查找 三、完整代码 3.1 Test.c文件 3.2 SeqList.h…
阅读更多...
C++之const_cast的用法

C++之const_cast的用法

C的四种类型转换之const_cast 这里写目录标题前言const_cast1.new type为左值引用2. new type为函数类型的右值引用3.new type为对象类型的右值引用4.指向函数的指针和指向成员函数的指针不受约束5.通过非const访问路径修改const对象导致未定义行为6.const_cast只能用来修改指针…
阅读更多...
Android onLayout布局流程解析

Android onLayout布局流程解析

组件布局流程结论 1.&#xff09;layout流程始于ViewRootImpl的performLayout()方法&#xff0c;该方法会调用根View&#xff08;DecorView&#xff09;的layout()方法进行布局&#xff0c;因为DecorView是ViewGroup(FrameLayout),所以layout流程来到了ViewGroup&#xff08;其…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023