微信小程序:实现微信小程序应用首页开发 (本地生活首页)

文章目录

      • 小程序应用页面开发
        • 1、创建项目并配置项目目录结构
        • 配置导航栏效果
        • 三、配置 tabBar 效果
        • 四、轮播图实现
          • 4.1 创建轮播图数据容器
          • 4.2 定义一个请求轮播图数据的接口
          • 4.3 页面加载调用 数据请求接口
        • 五、九宫格实现
        • 5.1 获取九宫格数据
        • 5.2 结构和样式的完善
        • 六、图片布局实现
        • 七、综合效果

小程序应用页面开发

在这里插入图片描述

1、创建项目并配置项目目录结构
  • 创建项目我相信大家都会,不会的可以csdn搜索即可

这里我们需要对项目目录进行修改配置
在这里插入图片描述

在 app.json 文件中的 pages 数组中添加三个页面,如上图所示,然后我们将其他默认的两个进行删除,然后左侧目录 pages 文件夹中的多余页面进行删除。

配置导航栏效果
  • 同样的在app.json 文件中的 window 对象中进行配置 我们的 导航栏效果 (app.json是全局配置)
  "window": {"navigationBarTextStyle": "white","navigationBarTitleText": "本地生活","navigationBarBackgroundColor": "#2b4b6b"}
三、配置 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"}]},
  • 效果图如下:
    在这里插入图片描述+ 这里的字体图标可以在 网上找, 也可以私信我,我给大家提供!
四、轮播图实现
  • 轮播图这里的效果,我们需要从后台接口中获取数据,接口如下:
    接口地址:https://applet-base-api-t.itheima.net/slides
https://applet-base-api-t.itheima.net/slides
4.1 创建轮播图数据容器
  /*** 页面的初始数据*/data: {// 轮播图数据slidesList: []},
4.2 定义一个请求轮播图数据的接口

home.js 代码如下:

	// 获取轮播图请求的方法getSlidesData () {wx.request({url: 'https://applet-base-api-t.itheima.net/slides',method: 'GET',success: (result) => {console.log(result.data)this.setData({slidesList: result.data})}})},
4.3 页面加载调用 数据请求接口
  /*** 生命周期函数--监听页面加载*/onLoad(options) {this.getSlidesData()},

方法一但被调用,立马发送接口数据的请求:我们可以进行查看数据请求是否成功!
在这里插入图片描述
如上图所示,如果数据存在,那么表示成功,就可以使用我们的数据了。

代码编写:home.wxml文件中

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

home.wxss

/* 轮播图样式 */
swiper {height: 300rpx
}swiper swiper-item image {width: 100%;height: 100%;
}

实现的效果图如下:
在这里插入图片描述

五、九宫格实现
5.1 获取九宫格数据
		// 1、九宫格数据列表gridList: []// 2、九宫格接口请求方法调用this.getGridList()// 3、九宫格数据请求方法getGridList () {wx.request({url: 'https://applet-base-api-t.itheima.net/categories',method: "GET",success: (result) => {this.setData({gridList: result.data})}})},
5.2 结构和样式的完善

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.3%;height: 200rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;border-right: 1rpx solid #efefef;border-bottom: 1rpx solid #efefef;box-sizing: border-box;
}.grid-item image {width: 60rpx;height: 60rpx;
}.grid-item text {font-size: 24rpx;margin-top: 10rpx;
}

实现效果图:

在这里插入图片描述

六、图片布局实现
<!-- 底部图片区域 -->
<view class="image-box"><image src="/images/link-01.png" mode="widthFix"/><image src="/images/link-02.png" mode="widthFix"/>
</view>
/* 图片区域 */
.image-box {display: flex;padding: 20rpx 10rpx;justify-content: space-around;
}.iamge-box image {width: 45%;
}

这样整个案例页面就全部实现了

七、综合效果

在这里插入图片描述

完结,敬请期待…

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

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

相关文章

基于 Amazon EC2 和 Amazon Systems Manager Session Manager 的堡垒机的设计和自动化实现

1. 背景 在很多企业的技术实现中&#xff0c;由于数据安全和合规性要求&#xff0c;大部分的应用服务都部署在私有云环境或专用网络中。为了满足开发人员和运维团队从本地数据中心安全访问云上资源的需求&#xff0c;采用堡垒机作为一种有效的解决方案变得尤为重要。 堡垒机的…

Java数组的传递

Java数组的传递过程中&#xff0c;值会不会改变 最后的运行结果是 String类型的值没有改变&#xff0c;char[]类型的值改变了。char[]打印出的并不是值&#xff0c;而是地址。 public class Test1{String str new String("good");char[] ch {a,b,c};public void ch…

【漏洞复现】H3C SecParh堡垒机任意用户登录漏洞

Nx01 产品简介 H3C SecParh堡垒机是一款专业用于安全管理的堡垒机产品&#xff0c;它通过强大的访问控制功能和安全审计功能&#xff0c;实现对网络服务器的远程安全管理和监控。 Nx02 漏洞描述 H3C SecParh堡垒机的get_detail_view.php中存在任意用户登录漏洞。攻击者可以构建…

深入了解Linux设备管理:字符、块和网络设备文件

在Linux系统中&#xff0c;硬件设备被视为一种特殊的文件类型&#xff0c;即设备文件。这种独特的文件类型分为三种&#xff1a;字符设备文件、块设备文件和网络设备文件。本篇博客将深入介绍这些设备文件的概念&#xff0c;以及它们在Linux系统中的作用和应用。 字符设备文件…

Robotframework 的简介及其工作原理~

下面通过官网和网上资料来简单介绍下Robotframework及其工作原理。 官方说明&#xff1a; Robot Framework is a generic test automation framework for acceptance testing and acceptance test-driven development (ATDD). It has easy-to-use tabular test data syntax a…

CentOS 7.9如何禁止内核自动更新升级

要在 CentOS 7.9 系统中禁止内核自动更新&#xff0c;你可以通过配置 YUM&#xff08;Yellowdog Updater, Modified&#xff09;来实现。这里有几种方法可以阻止内核自动更新&#xff1a; 方法 1: 使用 exclude 选项在 YUM 配置中 编辑 YUM 的配置文件 /etc/yum.conf&#xff…

IO 流分类

一、File File 类&#xff08;磁盘操作&#xff09;可以用于表示文件和目录的信息&#xff0c;但是它不表示文件的内容。递归地列出一个目录下所有文件&#xff1a; public static void listAllFiles(File dir) {if (dir null || !dir.exists()) {return;}if (dir.isFile())…

普源(RIGOL) DHO914S示波器 简单开箱评测

普源精电(RIGOL) DHO914S 12bit数字示波器 简单开箱评测。 旧的示波器感觉不好用&#xff0c;所以换个新的&#xff0c;看中了普源的这款&#xff0c;主要看中它便携支持PD供电&#xff0c;还有伯德图功能&#xff0c;以及12bit的垂直分辨率。如果你对我上面说的点没需求&…

【C语言】Debian安装并编译内核源码

在Debian 10中安装并编译内核源码的过程如下&#xff1a; 1. 安装依赖包 首先需要确保有足够的权限来安装包。为了编译内核&#xff0c;需要有一些基础的工具和库。 sudo apt update sudo apt upgrade sudo apt install build-essential libncurses-dev bison flex libssl-d…

Linux环境部署Maven(图文详细)

目录 摘要 一、准备工作 1.检查当前环境是否安装maven 2.下载maven ​编辑 3.上传maven压缩包 4.解压maven包 5.移动到/usr/local目录下方便管理 6.配置maven环境变量 7.刷新配置文件 8.配置maven镜像仓库 9.验证是否成功 摘要 笔者Linux环境为&#xff1a;Ubuntu 2…

Vue | (一)Vue核心(下) | 尚硅谷Vue2.0+Vue3.0全套教程

文章目录 &#x1f4da;class与style绑定&#x1f4da;条件渲染&#x1f4da;列表渲染&#x1f407;基本列表&#x1f407;key的原理&#x1f407;列表过滤&#xff08;搜索&#xff09;&#x1f407;列表排序&#x1f407;Vue数据监测 &#x1f4da;收集表单数据&#x1f4da;…

ADO世界之SECOND

目录 一、ADO 排序记录 1.对数据进行排序 2.根据指定的字段名处对记录进行升序排序 3.根据指定的字段名处对记录进行降序排序 4.让用户来选择根据哪列进行排序 二、ADO 添加记录 1.向数据库中的表添加记录 2.使用 INSERT command 命令时的注意事项 3.无数据字段 三、…

C 练习实例70-求字符串长度

题目&#xff1a;写一个函数&#xff0c;求一个字符串的长度&#xff0c;在 main 函数中输入字符串&#xff0c;并输出其长度。 解答&#xff1a; #include <stdio.h> int length(char *s); int main() {int len;char str[20];printf("请输入字符串:\n");scan…

一周学会Django5 Python Web开发-Django5路由定义

锋哥原创的Python Web开发 Django5视频教程&#xff1a; 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计22条视频&#xff0c;包括&#xff1a;2024版 Django5 Python we…

【数据库】日常使用PL/SQL 登录ORACLE 数据库查询数据

一、PL/SQL 登录方式 username&#xff1a; ##访问数据库的账号 password&#xff1a; ##访问数据库的密码 Databse&#xff1a; ##数据库IP地址/实例名 & 数据库集群心跳地址/实例名 Connect as : ##Normal&#xff0c;如果使用sysdba账户登录选择SYSDBA 二、PL/SQL使用…

OpenAI Sora —— 文生视频为何如此逼真?AI算法架构解析

OpenAI于2024年2月16日发布了名为Sora的文生视频模型。Sora是一个革命性的视频生成模型&#xff0c;可以根据用户输入的简单文本脚本自动生成与好莱坞级别画面相媲美的视频内容&#xff0c;其生成的视频不仅仅是对已有素材的拼接或剪辑合成&#xff0c;而是从像素级别全新“绘制…

返回 x 的小数和整数部分math.modf(x)

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 返回 x 的小数和整数部分 math.modf(x) [太阳]选择题 请问以下代码输出的结果是&#xff1f; import math print("【执行】math.modf(10.5)") print(math.modf(10.5)) A选项&am…

Vue+Vite项目初建(axios+Unocss+iconify)

一. 创建项目 npx --package vue/cli vue 项目成功启动后&#xff0c;进入http://localhost:3200&#xff0c;即可进入创建好的页面(假设启动端口为3200) 二. 测试网络通讯模块 假设有本地服务器地址localhost:8000提供接口服务&#xff0c;接口为localhost:8000/token&#…

IDEA2023.3.4开启SpringBoot项目的热部署【简单明了4步操作】

添加devtools依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional> </dependency>IDEA开启自动编译 …

移动端App自动化之触屏操作自动化

工作中我们经常需要对应用的页面进行手势操作&#xff0c;比如滑动、长按、拖动等&#xff0c;AppiumDriver 为我们提供一个模拟手势操作的辅助类 TouchAction&#xff0c;可以通过它对手机屏幕进行手势操作。 具体用法参见链接&#xff1a;chromedriver下载地址与webview自动…