(三)小程序样式和组件

news2024/11/29 10:40:42

视频链接:尚硅谷2024最新版微信小程序

文章目录

  • 小程序的样式和组件介绍
  • 样式-尺寸单位 rpx
  • 样式-全局样式和局部样式
  • 组件-组件案例演示
  • 组件案例-轮播图区域绘制
  • 组件案例-轮播图图片添加
  • 组件案例-绘制公司信息区域
  • 组件案例-商品导航区域
  • 组件案例-跳转到商品列表
  • 组件案例-推荐商品区域
  • 组件案例-字体图标的使用
  • 背景图的使用

小程序的样式和组件介绍

在开发 Web 网站的时候:

  • 页面的结构由 HTML 进行编写,例如:经常会用到 div、p、 span、img、a 等标签
  • 页面的样式由 CSS 进行编写,例如:经常会采用 .class 、#id 、element 等选择器

但在小程序中不能使用 HTML 标签,也就没有 DOM 和 BOM,CSS 也仅仅支持部分选择器

小程序提供了 WXML 进行页面结构编写,同时提供了 WXSS 进行页面的样式编写

  • WXML 提供了 view、text 、image、navigator 等标签来构建页面结构,只不过在小程序中将标签称为组件
  • WXSS 对 CSS 扩充和修改,新增了尺寸单位 rpx、提供了全局的样式局部样式,另外需要注意的是 WXSS 仅支持部分 CSS 选择器

样式-尺寸单位 rpx

随着智能手机的发展,手机设备的宽度也逐渐多元化,这就需要开发者在开发的时候,需要适配不同屏幕宽度的手机。为了解决屏幕适配的问题,微信小程序推出了 rpx 单位

  • rpx : 是小程序新增的自适应单位,它可以根据不同设备的屏幕宽度进行自适应缩放

小程序规定任何型号手机:屏幕宽都为 750 rpx

📌 开发建议:

  1. 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准,iPhone6 的设计稿一般是 750px
  2. 如果用 iPhone6 作为视觉稿的标准 量取多少 px ,直接写多少 rpx 即可,开发起来更方便,也能够适配屏幕的宽度

设计稿宽度是 750px,而 iPhone6 的手机设备宽度是 375px, 设计稿想完整展示到手机中,就需要缩小一倍

在 iPhone6 下,px 和 rpx 的换算关系是:1rpx = 0.5px, 750rpx = 375px,刚好能够填充满整个屏幕的宽度

样式-全局样式和局部样式

在进行网页开发时,我们经常创建 global.cssbase.css 或者 reset.css 作为全局样式文件进行重置样式或者样式统一,然后在每个页面或组件中写当前页面或组件的局部样式,小程序中也存在全局样式和局部样式。

  • 全局样式:指在 app.wxss 中定义的样式规则,作用于每一个页面,例如:设置字号、背景色、宽高等全局样式
  • 局部样式:指在 page.wxss 中定义的样式规则,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

组件-组件案例演示

小程序常用的组件:

  1. view 组件
  2. swiper 和 swiper-item 组件
  3. image 组件
  4. text 组件
  5. navigator 组件
  6. scroll-view 组件
  7. 字体图标
    使用小程序常用的组件实现项目首页的效果
    在这里插入图片描述

组件案例-轮播图区域绘制

在进行网页开发的时候,实现轮播图的时候,我们通常先使用 HTML 、CSS 实现轮播图的结构样式,

然后使用 JS 控制轮播图的效果,或者直接使用插件实现轮播图的功能,而在小程序中实现小程序功能则相对简单很多。

在小程序中,提供了 swiperswiper-item 组件实现轮播图:

  • swiper:滑块视图容器,其中只能放置 swiper-item 组件
  • swiper-item:只可放置在 swiper 组件中,宽高自动设置为100%,代表 swiper 中的每一项

组件案例-轮播图图片添加

在小程序中,如果需要渲染图片,需要使用 image 组件,常用的属性有 4 个:

  1. src 属性:图片资源地址
  2. mode :图片裁剪、缩放的模式
  3. show-menu-by-longpress:长按图片显示菜单
  4. lazy-load:图片懒加载

📌 注意事项:

  • image 默认具有宽度和高度,宽是 320px 高度是 240px
  • image 组件不给 src 属性设置图片地址,也占据宽和高

组件案例-绘制公司信息区域

在小程序中,如果需要渲染文本,需要使用 text 组件,常用的属性有 2 个:

  1. user-select :文本是否可选,用于长按选择文本
  2. space :显示连续空格

📌 注意事项:

  • 除了文本节点以外的其他节点都无法长按选中
  • text 组件内只支持 text 嵌套

组件案例-商品导航区域

  1. view :视图容器
  2. image :图片组件
  3. text:文本组件

组件案例-跳转到商品列表

在小程序中,如果需要进行跳转,需要使用 navigation 组件,常用的属性有 2 个:

  1. url :当前小程序内的跳转链接

  2. open-type :跳转方式

    • navigate:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面
    • redirect: 关闭当前页面,跳转到应用内的某个页面。但不能跳转到 tabbar 页面
    • switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
    • reLaunch:关闭所有页面,打开到应用内的某个页面
    • navigateBack:关闭当前页面,返回上一页面或多级页面

📌 注意事项:
1.路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔
例如:/list?id=10&name=hua,在 onLoad(options) 生命周期函数 中获取传递的参数
2.open-type=“switchTab” 时不支持传参

组件案例-推荐商品区域

在微信想小程序中如果想实现内容滚动,需要使用 scroll-view 组件

scroll-view:可滚动视图区域,适用于需要滚动展示内容的场景,用于在小程序中实现类似于网页中的滚动条效果,用户可以通过手指滑动或者点击滚动条来滚动内容。

先来学习两个属性:

  1. scroll-x:允许横向滚动
  2. scroll-y:允许纵向滚动

组件案例-字体图标的使用

在项目中使用到的小图标,一般由公司设计师进行设计,设计好以后上传到阿里巴巴矢量图标库,然后方便程序员来进行使用。

小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。

📌 注意事项:

  • 使用字体图标可能会报错:[渲染层网络层错误] Failed to load font…,该错误可忽略
  • 但在控制台出现错误,会影响开发调试,解决方案是:将字体图标转换成 base64 的格式

背景图的使用

当编写小程序的样式文件时,我们可以使用 background-image 属性来设置元素的背景图像

📌 注意事项:
小程序的 background-image 不支持本地路径 !需要使用网络图片,或者 base64,或者使用 组件

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

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

相关文章

Java实现 selenium Web自动化测试(简单篇)

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

LifeCycle之ProcessLifeCycleOwner

问题:想要知道应用程序当前处在前台、后台、或从后台回到前台,想要知道应用的状态, LifeCycle提供了ProcessLifeCycleOwner的类,方便我们知道整个应用程序的生命周期情况 ProcessLifeCycleOwner 使用方法 1.首先添加依赖 imple…

Flutter 首次亮相 Google Cloud Next 大会

作者 / Kelvin Boateng Flutter 团队在近期首次参加了 Google Cloud Next 大会,这意味着 Flutter 在开发社区中的影响力正在日益增长。 Google Cloud Next https://cloud.withgoogle.com/next 我们与 Google Cloud、Firebase、Very Good Ventures 和 Serverpod 的团…

深化产教融合,泰迪智能科技助力西南林业大学提质培优

2024年5月7日,泰迪智能科技昆明分公司院校部总监查良红和数据部负责人余雄亮赴西南林业大学理学院就工作室共建事宜进行交流会谈。西南林业大学理学院院长张雁、党委副书记魏轶、副院长谢爽、就业负责人罗丽及学生代表参与本次交流会。 会议伊始,谢副院长…

C++语法|进程虚拟地址空间和函数调用栈

本文来自施磊老师的课程,老师讲的非常不错,我的笔记也是囫囵吞枣全部记下,但是我在这里推荐一本书,真的真的建议初学C或者想要进阶C的同学们看看:《CPU眼里的C/C》 文章目录 进程的虚拟地址空间和布局进程虚拟地址空间…

服务异步通讯MQ

同步调用存在的问题: 异步调用方案: RabbitMQ安装: 第一种:在线拉取 docker pull rabbitmq:3-management 第二种:将已有的安装包放入再用load加载 我这里放到tmp包里边 然后:cd /tmp docker load -i mq.tar 加载进去 然后运行mq容器 docker run \-e RABBITMQ_DEFAULT_USER…

tag-字符串:数组拆分I

题目 给定长度为 2n 的整数数组 nums ,你的任务是将这些数分成 n 对, 例如 (a1, b1), (a2, b2), …, (an, bn) ,使得从 1 到 n 的 min(ai, bi) 总和最大。 返回该 最大总和 。 示例 题解一 class Solution:def arrayPairSum(self, nums: List[int]) …

@Test测试Mapper接口报错java.lang.NullPointerException

Test测试Mapper接口报错java.lang.NullPointerException 报错原因:没有注入依赖 解决方法:在测试类上面添加SpringBootTest

windows 环境下安装《车辆动态监控系统》支持JT808、JT1078、苏标主动安全设备接入

《车辆动态监控系统》下载安装部署包 开放端口 80/443/8800,web后台端口,nginx代理服务,nginx默认为8800端口8808,JT808专用端口6802,视频播放推流端口6891-6898,FTP端口6821,苏标主动安全附件…

[GESP样题 四级] 绝对素数

B3939 [GESP样题 四级] 绝对素数 题目 如果一个两位数是素数,且它的数字位置经过对换后仍为素数,则称为绝对素数,例如 13。给定两个正整数 A, B,请求出大于等于 A,小于等于 B 的所有绝对素数。 输入 1 行&#xff0…

LPDDR5电路设计的新功能

最近因为需要使用到LPDDR5,快速地浏览了JEDEC标准文档,发现与前几代相比出现了一些新的电路设计功能,总结为如下三点: 1. CK/WCK/RDQS时钟方案; 2. 电源的PDN设计目标; 3. DQ, DMI和RDQS的Rx端DFE均衡技术。…

便宜的智能组网系统有哪些?

随着物联网的迅猛发展,智能设备的普及与应用也日益增多。不同地区的智能设备之间的互联通信仍然存在着很多困难和挑战。其中一个主要问题是如何实现便宜而高效的智能组网。在这篇文章中,我们将介绍一款名为【天联】的组网产品,它是北京金万维…

《TAM》论文笔记(上)

原文链接 [2005.06803] TAM: Temporal Adaptive Module for Video Recognition (arxiv.org) 原文代码 GitHub - liu-zhy/temporal-adaptive-module: TAM: Temporal Adaptive Module for Video Recognition 原文笔记 What: TAM: Temporal Adaptive Module for …

AXI4读时序在AXI Block RAM (BRAM) IP核中的应用

在本文中将展示描述了AXI从设备(slave)AXI BRAM Controller IP核与Xilinx AXI Interconnect之间的读时序关系。 1 Single Read 图1展示了一个从32位BRAM(Block RAM)进行AXI单次读取操作的时序示例。 图1 AXI 单次读时序图 在该…

555555

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起探讨和分享Linux C/C/Python/Shell编程、机器人技术、机器学习、机器视觉、嵌入式AI相关领域的知识和技术。 人工智能与机器学习 📝人工智能相关概念☞什么是人工智能、机器学习、深度学习☞人工智能发…

【二次元MMORPG游戏开发】任务系统技术拆解

引言 各位同学大家好。在今天的分享当中,我将对任务系统去做一个拆解。也许你见过很多任务系统,但是今天我要分享的是我们经过一个框架迭代以后的任务系统。我会结合客户端的功能演示给大家去讲解。 跟着演示学开发 基本操作 好,首先我们点…

STM32 ADC学习

ADC Analog-to-Digital Converter,即模拟/数字转换器 常见ADC类型 分辨率和采样速度相互矛盾,分辨率越高,采样速率越低。 ADC的特性参数 分辨率:表示ADC能辨别的最小模拟量,用二进制位数表示,比如8,10…

clickhouse学习笔记06

ClickHouse的建表和引擎选择思路讲解 ClickHouse的常见注意事项和异常问题排查 ClickHouse高性能查询原因剖析-稀疏索引 ClickHouse高性能写入剖析-LSM-Tree存储结构

【每日力扣】98. 验证二叉搜索树 与 108. 将有序数组转换为二叉搜索树

🔥 个人主页: 黑洞晓威 😀你不必等到非常厉害,才敢开始,你需要开始,才会变的非常厉害 98. 验证二叉搜索树 给你一个二叉树的根节点 root ,判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&a…

Centos7使用kubeadm搭建k8s集群(一主两从)----(mac版)

一、环境准备 1、下载centos7镜像 阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 下载地址: centos安装包下载_开源镜像站-阿里云 选择对应的版本即可,我下载的:CentOS-7-x86_64-DVD-2207-02.iso 2、使用VirtualBox安装centos 选择新建&#xff0c…