(三)小程序样式和组件

视频链接:尚硅谷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.mzph.cn/bicheng/9310.shtml

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

相关文章

python爬取sci论文等一系列网站---通用教程超详细教程

环境准备 确保安装了Python以及requests和BeautifulSoup库。 pip install requests beautifulsoup4确定爬取目标 选择一个含有SCI论文的网站,了解该网站的内容布局和数据结构。 (1)在浏览器中访问目标网站,右键点击页面并选择…

案例研究|硬之城借助DataEase以数据驱动供应链精细化管理

深圳硬之城信息技术有限公司(以下简称为“硬之城”)成立于2015年,专注电子元件供应链领域,定位于电子产业供应链与智造平台。硬之城通过名为“Allchips”的集成式服务平台,为客户提供一站式的电子元件采购和供应链管理…

VTK 建模方法:建模基础

VTK 建模方法:建模基础 VTK 建模方法:建模基础VTK 中模型的表达实例1:自定义 vtkPolyData实例2:vtkTubeFilter实例3:vtkImplicitModeller实例4:vtkRegularPolygonSource实例5:vtkWarpTo VTK 建模…

如何在mac电脑安装 Android SDK

1、在 Mac 电脑上安装 Android SDK 的步骤如下: 前往 Android 开发者网站下载 Android SDK 打开 Android 开发者网站 (https://developer.android.com/studio) 打开下载好的 Android SDK 安装包 2、解压 Android SDK 安装包 打开下载好的 Android SDK 安装包 将 android-…

[力扣题解]78.子集

题目&#xff1a;子集 思路 回溯法 代码 class Solution { public:vector<vector<int>> result;vector<int> path;void function(vector<int>& nums, int startindex){// 为什么要到这里写? 后面调用递归之前就不对result.push_back(path);//…

深度主动学习(Deep Active Learning)——基于pytorch和ALipy工具包实现双向GRU模型

前言 在ALipy的官网说ALipy只支持sklearn和tensorflow模型&#xff0c;模型对象应符合 scikit-learn api。 但是alipy提供了ToolBox的工具箱&#xff0c;里面包装了多种查询策略&#xff0c;计算指标等工具&#xff0c;几乎具有Alipy的全部功能&#xff0c;虽然不能使用ALipy提…

华为昇腾310B1平台深度学习算法模型转换

目录 1 模型转换(集成nms算子到模型中) 1.1 基础模型说明 1.2 模型转换 1.2.1 设置环境变量 1.2.2 安装yolov5依赖&#xff08;gcc需要>7.5&#xff09; 1.2.3 转换fp16模型 2 模型转换(使用atc&#xff0c;不集成nms算子) 参考文献&#xff1a; 1 模型转换(集成nms…

Pycharm2024版,更换安装源

1、选择Python Packages 2、点击图中的小齿轮 3、点击 号 4、添加源地址 常用源如下&#xff1a; 清华&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple 阿里云&#xff1a;http://mirrors.aliyun.com/pypi/simple/ 中国科技大学 https://pypi.mirrors.ustc.edu.cn…

【3】STM32·FreeRTOS·任务挂起和恢复

目录 一、任务的挂起与恢复的API函数 1.1、任务挂起函数介绍 1.2、任务恢复函数介绍&#xff08;任务中恢复&#xff09; 1.3、任务恢复函数介绍&#xff08;中断中恢复&#xff09; 二、任务挂起与恢复实验 一、任务的挂起与恢复的API函数 API函数描述vTaskSuspend()挂起…

HTML5 Canvas发光Loading动画特效源码

源码介绍 之前我们分享过很多基于CSS3的Loading动画效果&#xff0c;相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的&#xff0c;整个loading动画是发光3D的视觉效果&#xff0c;HTML5非常强大。 …

索引失效情况

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;面经 ⛺️稳中求进&#xff0c;晒太阳 一、索引列上运算操作。 不要在索引列上进行运算操作&#xff0c;否则索引会失效。 在tb_user的phone列加上索引&#xff0c;然后进行条件查询&am…

nginx自动部署-跨操作系统

项目里面有一个需求&#xff0c;就是需要用让nginx进程提供给系统管理一个start,stop和getPid方法&#xff0c;这样系统管理可以自动拉起来nginx&#xff0c;达到自动部署的目的。离线部署同样适用 这样一来&#xff0c;我就需要提供windows版本linux不同版本的nginx源码包&am…

解决Vue devtools插件数据变化不会自动刷新

我们使用devtools插件在监测vuex中表单或自定义组件的数据&#xff0c;发现页面数据发生变化后&#xff0c;但是devtools中还是老数据&#xff0c;必须手动点击devtools刷新才能拿到最新的数据。很烦&#xff01; 解决方案&#xff1a; 打开chrome的设置&#xff0c;向下翻&…

JavaEE企业级开发中常用的Stream流

介绍 在Java编程中&#xff0c;Stream流是Java 8引入的一个重要概念&#xff0c;它提供了一种新的处理集合的方式&#xff0c;可以更加简洁、高效地进行数据操作。Stream流支持各种常见的操作&#xff0c;比如过滤、映射、排序、聚合等&#xff0c;同时也支持并行处理&#xf…

SAP供应商预付款业务

业务理解&#xff1a; 预付账款是企业向供应商预付的款项 应付账款是企业尚未支付的款项。 两者区别&#xff1a; 预付账款属于企业的资产&#xff0c;应计入预付账款科目中&#xff0c;而应付账款属于企业的负债&#xff0c;应计入应付账款科目中。应付账款是提前支付的…

macOS 如何使用Visual Studio Code 编译C++

在 macOS,则默认系统 C++ 编译器是 Clang。 要使用 Visual Studio Code 在 macOS 上的 Clang 中指定 C++ 版本,可以按如下所示修改tasks.json 文件: 在 Visual Studio Code 中打开您的 C++ 项目。按 Ctrl+Shift+P(或 macOS 上的 Cmd+Shift+P)打开命令面板。在命令面板中键…

自学错误合集--MessageSource国际化接口

java后端自学错误总结 一.MessageSource国际化接口总结 一.MessageSource国际化接口 今天第一次使用MessageSource接口,比较意外遇到了一些坑 messageSource是spring中的转换消息接口&#xff0c;提供了国际化信息的能力。MessageSource用于解析 消息&#xff0c;并支持消息的…

字节、进制、字符串格式化

文章目录 1.字节2.不同的进制之间转换数值3.bytes()用法4.struct.unpack()用法5.字符串格式化{:03.2f} 1.字节 字节&#xff08;Byte&#xff09;是计算机存储和处理数据的基本单位之一。一个字节可以存储8个二进制位&#xff08;bit&#xff09;&#xff0c;每个二进制位可以…

【Android】使用Handler实现一个定时器

需求 实现一个定时任务&#xff0c;每隔一秒执行一次 实现 使用Handler实现 private Handler topUIHandler;private void initTopUiHandler() {topUIHandler new Handler(getMainLooper()) {Overridepublic void handleMessage(Message msg) {//执行这个定时任务updateTop…

软件项目管理期末复习题8-16章

第八章软件项目质量计划 一、填空题 1、&#xff08;审计&#xff09;是对过程或产品的一次独立质量评估。 2、质量成本包括预防成本和&#xff08;缺陷成本&#xff09;。 3、&#xff08;软件质量&#xff09;是软件满足明确说明或者隐含的需求的程度。 5、McCall质量模…