微信小程序实践案例

参考视频:

https://www.bilibili.com/video/BV1834y1676P/?p=36&spm_id_from=pageDriver&vd_source=b604c19516c17da30b6b1abb6c4e7ec0

前期准备

1、新建三个页面

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

2、导航栏设置

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

一、tabBar设置

阿里巴巴图标库:https://www.iconfinder.com/

大部分不用登录,免费获取。

"tabBar": {"list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "pages/image/home.png","selectedIconPath": "pages/image/home_active.png"},{"pagePath": "pages/message/message","text": "消息" ,"iconPath": "pages/image/massage.png","selectedIconPath": "pages/image/message_active.png"},{"pagePath": "pages/contact/contact","text": "联系我们" ,"iconPath": "pages/image/contact.png","selectedIconPath": "pages/image/contact_active.png"}]},

二、实现轮播图

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

https://applet-base-api-t.itheima.net/slides

data: {//存放数据轮播图的数组swiperList: []},//获取轮播图数据的方法getSwiperList(){wx.request({url: 'https://applet-base-api-t.itheima.net/slides',method: 'GET',success: (res) =>{console.log(res)}})},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getSwiperList()},

2、将获取的数据赋值给data

  //将获取的数组赋值给datathis.setData({swiperList: res.data})

3、渲染到页面

<!--pages/home/home.wxml-->
<!--轮播图组件-->
<swiper>
<swiper-item wx:for="{{swiperList}}" wx:key="id">
<image src="{{item.image}}"></image>
</swiper-item>
</swiper>

4、美化样式

/* pages/home/home.wxss */
swiper{height: 350rpx;
}
swiper image{
height: 100%;
width:100%;
}

5、添加小圆点(indicator-dots)和衔接滚动(circular)

三、实现九宫格

1、获取九宫格数据

https://applet-base-api-t.itheima.net/categories

写法跟实现轮播图的一样。

 /*** 页面的初始数据*/data: {//存放九宫格数据的数组gridList: []},
//获取九宫格数据的方法getGridList(){wx.request({url: 'https://applet-base-api-t.itheima.net/categories',method: 'GET',success: (res) =>{console.log(res)
//将获取的数据存放到data中this.setData({gridList: res.data})}})},
/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getGridList()},

2、渲染页面

<!--九宫格区域-->
<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>

3、美化样式

.grid-list{display: flex;flex-wrap: wrap;
}
.grid-item{width: 33.3%;
}
.grid-item image{width: 60rpx;height: 60rpx;
}

给字添加样式:

.grid-item text{font-size: 24rpx;margin-top: 10rpx;}

图片布局:

添加浅色分隔框:

变成九宫格:

box-sizing: border-box;

四、图片区域

1、渲染页面

<!--图片区域--><view class="img-box"><image src="/pages/image/1.jpg"></image><image src="/pages/image/2.jpg"></image></view>

2、美化样式

.img-box{display: flex;
}

3、调整图片

(1)修改xml页面

        宽度不变,变高度

<!--图片区域-->
<view class="img-box">
<image src="/pages/image/1.jpg" mode="widthFix"></image>
<image src="/pages/image/2.jpg" mode="widthFix"></image>
</view>

(2)图片样式

.img-box{display: flex;padding: 20rpx 10rpx;justify-content: space-around;
}
.img-box image{width: 45%;
}

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

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

相关文章

智慧交通基于yolov8的井盖异常检测系统python源码+onnx模型+评估指标曲线+精美GUI界面

【算法介绍】 智慧交通中的井盖异常检测系统&#xff0c;基于先进的YOLOv8算法&#xff0c;为城市基础设施的安全管理提供了强有力的技术支持。该系统通过集成YOLOv8的深度学习技术&#xff0c;实现了对道路井盖状态的实时、精准监测。 YOLOv8以其高效、准确的特点&#xff0…

为什么现在不建议去电力设计院?终于有人把电力设计院说清楚了!

作者&#xff1a;电气哥 最近电气哥收到了许多面临就业的同学特别是硕士同学有关于电力设计院的咨询&#xff0c;那么现在电力设计院到底还值不值得去&#xff1f;电气哥带你来分析一下电力设计院的前世今生。 01 电力设计院的前世今生 曾经&#xff0c;在我国的大基建时代&…

“Docker网络模式详解与应用“

目录 前言 Docker内置网络 bridge 基本概念 案例 工作原理 使用场景 host 基本概念 案例 工作原理 使用场景 none 基本概念 案例 &#xff01;&#xff01;&#xff01;大佬救命 container 基本概念 案例 自定义网络 自定义bridge 基本概念 案例 Docker…

如何操作可以有效的防止其他人修改Excel文件?

工作中&#xff0c;我们经常遇到同一份表格可能需要好多人共同去完成&#xff0c;但是当你整理好数据发给别的同事的时候&#xff0c;等表格再回来的时候&#xff0c;你可能发现你之前设置的资料格式内容等都被修改了&#xff0c;遇到这种情况时&#xff0c;如何操作可以有效的…

传统CV算法——基于Opencv的图像绘制

直线绘制 参数解析&#xff1a; &#xff08;图像矩阵&#xff0c;直线起始坐标&#xff0c; 直线终止坐标、颜色、线条厚度&#xff09; cv2.line()是OpenCV中用于绘制直线的函数。 参数说明&#xff1a;img&#xff1a;要绘制直线的图像矩阵。(100,30)&#xff1a;直线的起…

第二十三篇——地形篇:将领的四条职业道德准则

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 这一篇讲将领应该如何做&#xff0c;以及正反方面也讲到了职场人应该如何…

STM32CUBEIDE FreeRTOS操作教程(四):timer软件定时器

STM32CUBEIDE FreeRTOS操作教程&#xff08;四&#xff09;&#xff1a;timer软件定时器 STM32CUBE开发环境集成了STM32 HAL库进行FreeRTOS配置和开发的组件&#xff0c;不需要用户自己进行FreeRTOS的移植。这里介绍最简化的用户操作类应用教程。以STM32F401RCT6开发板为例&am…

oauth2 方式获取outlook邮箱收件箱(python)

1.在Azure 门户注册应用程序 微软文档地址 重定向的地址配置(微软地址)&#xff1a; https://login.microsoftonline.com/common/oauth2/nativeclient 注册应用地址 2.程序代码 #安装包以及需要的驱动 pip3 install playwrightplaywright install import base64 import jso…

MAT:一款针对MSSQL服务器的安全检测与审计工具

关于MAT MAT是一款针对MSSQL服务器的安全检测与审计工具&#xff0c;该工具使用C#开发&#xff0c;可以帮助广大研究人员快速识别和发现MSSQL 服务器中的安全问题&#xff0c;并实现安全检测与审计目的。 功能介绍 1、执行自动检查并识别安全问题&#xff1b; 2、允许通过 Win…

暑期档总结:哪部国漫年番表现更优?

“暑期档”可能是所有档期中绵延时间最长的&#xff0c;作为该时间段主力的学生人群&#xff0c;在学业压力较小的假期中&#xff0c;需要更多娱乐方式来填充生活。除了电影之外&#xff0c;动画番剧越来越成为这一群体的不二选择&#xff0c;各个动画制作公司也会选择把精彩剧…

Datawhle X 李宏毅苹果书AI夏令营深度学习笔记之——卷积神经网络的前世今生

一、卷积神经网络简介 卷积神经网络&#xff08;Convolutional Neural Network, CNN&#xff09;是一种深度学习模型&#xff0c;尤其擅长处理图像和视频等高维度的数据。CNN 通过模仿人类视觉系统的工作方式&#xff0c;自动学习数据中的空间层次结构&#xff0c;使得它在计算…

GDB 查看汇编

查看汇编 x disassemble

24秋开学考

文件上传 上传一个.php的格式&#xff0c;上面说是非法的文件格式。 2.传了一个phpinfo.gif&#xff0c;说什么在目录里。 3.有两个页面一个labs1一个labs2 &#xff0c;当在第一个页面上传1.jpg&#xff0c;在第二个页面上传1.jpg时&#xff0c;给了我们一个目录,在测试其他时…

Linux下的Makefile与进度条程序

目录 Linux下的Makefile与进度条程序 Makefile与make Makefile与make介绍 创建第一个Makefile并使用make Makefile文件基本格式介绍 Makefile依赖方法执行过程 Makefile通用写法 进度条程序 实现效果 前置知识 回车(\r)与换行(\n) 输出缓冲区 实现进度条 Linux下的…

15、Django Admin添加自定义字段功能

修改模型类HeroAdmin admin.register(Hero) class HeroAdmin(admin.ModelAdmin):change_list_template "entities/heroes_changelist.html"... # 此处原代码不动&#xff0c;只增加此前后代码def get_urls(self):urls super().get_urls()my_urls [path(immort…

溜狗牵绳行为检测-目标检测数据集(包括VOC格式、YOLO格式)

溜狗牵绳行为检测-目标检测数据集&#xff08;包括VOC格式、YOLO格式&#xff09; 数据集&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1CwLEAKcdlh9hbcBNh_Awdw?pwdiu6b 提取码&#xff1a;iu6b数据集信息介绍&#xff1a; 共有 1980 张图像和一一对应的标注文件…

7.统一网关-Gateway

文章目录 1.统一网关介绍2.网关开发3.predicate4.Route Predicate Factories(路由断言工厂)4.1Path 路由断言工厂4.2.Method 路由断言工厂4.3 Header 路由断言工厂4.4 Query 路由断言工厂4.5 Host 路由断言工厂4.6 After 路由断言工厂4.7 Before 路由断言工厂4.8 Between 路由断…

超声波测距模块HC-SR04(基于STM32F103C8T6HAL库)

超声波测距模块参考资料 1.电路连接及引脚配置 触发信号PA3只需要输出10us的高电平&#xff0c;所以直接设置成 普通的GPIO端口即可&#xff1b;回响信号使用外部中断&#xff0c;上升沿信号产生外部中断&#xff0c;打开定时器&#xff0c;下降沿再产生一次中断&#xff0c;读…

国内外大模型汇总(包括科大星火、文心一言、通义千问、智普清言、华为大模型)

国内外大模型汇总 1. 科大讯飞星火认知大模型 主要特点&#xff1a; 多语言能力&#xff1a;以中文为核心&#xff0c;同时支持多语言处理&#xff0c;能够进行跨语种的语言理解和生成。 广泛的任务能力&#xff1a;具备内容生成、语言理解、知识问答、推理、数学计算、代码…

强化网络安全:通过802.1X协议保障远程接入设备安全认证

随着远程办公和移动设备的普及&#xff0c;企业网络面临着前所未有的安全挑战。为了确保网络的安全性&#xff0c;同时提供无缝的用户体验&#xff0c;我们的 ASP 身份认证平台引入了先进的 802.1X 认证协议&#xff0c;确保只有经过认证的设备才能接入您的网络。本文档将详细介…