3.微信小程序之常用组件篇

目录

1. 组件和样式介绍

2. 样式-尺寸单位

3. 样式-全局样式和局部样式

4. 常用组件

4.1.view 组件

4.2.text 组件 

4.3.image 组件

4.4.navigator 组件

4.5.swiper 和 swiper-item 组件

4.6.scroll-view 组件 

5.字体图标的使用

6. 背景图片的使用


1. 组件和样式介绍

在开 Web 网站的时候:

页面的结构由 HTML 进行编写,例如:经常会用到 divpspanimga 等标签

页面的样式由 CSS 进行编写,例如:经常会采用 .class#idelement 等选择器

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

不过不用担心,小程序中提供了同样的角色:

其中 WXML 充当的就是类似 HTML 的角色,只不过在 WXML 中没有divpspanimga 等标签,在 WXML 中需要使用 小程序提供的 viewtextimagenavigator 等标签来构建页面结构,小程序提供的这些标签,我们称为 "组件",开发者可以通过组合这些基础组件进行快速开发。

WXSS 则充当的就是类似 CSS 的角色,WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改,新增了尺寸单位 rpx、提供了全局的样式和局部样式,另外需要注意的是WXSS 仅支持部分 CSS 选择器

小程序给提供的组件文档:WXML

小程序样式官方文档:WXSS


2. 样式-尺寸单位

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

小程序运行在手机移动端,宿主环境是微信,因为手机尺寸的不一致,在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,会采用一些技巧来算像素单位从而实现页面的适配。而 WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可。

rpx: 小程序新增的拓展单位,可以根据屏幕宽度进行自适应,小程序规定任何型号手机:满屏幕宽都为 750 rpx

🔔 开发建议

开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

iPhone6 的设计稿一般是 750px,小程序的宽是 750rpx

在我们开发小程序页面时,量取多少 px ,直接写多少 rpx,开发起来更方便,也能够适配屏幕的适配

原因:

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

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


3. 样式-全局样式和局部样式

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

全局样式:指在 app.wxss中定义的样式规则,作用于每一个页面,例如:设置字号、背景色、宽高等全局样式

局部样式:指在page.wxss中定义的样式规则,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。


4. 常用组件

4.1.view 组件

view:视图容器组件,相当于 HTML 中的 div,是一个块级元素,独占一行

4.2.text 组件 

text:文本组件,相当于 span,是一个行内元素

4.3.image 组件

在小程序中没有 img 标签,添加图片需要使用小程序提供的image组件,image组件的语法如下:

<!-- src:图片资源地址 -->
<!-- mode:图片裁剪、缩放的模式 -->
<!-- lazy-load:图片懒加载,在即将进入一定范围(上下三屏)时才开始加载 -->
<image src="/assets/tom.png" mode="heightFix" lazy-load=”{{ true }}“ />
4.4.navigator 组件

在网页开发中,如果想实现页面的跳转需要使用 a 标签,在小程序中如果想实现页面的跳转则需要使用 navigator 组件,语法如下:

<!-- url:当前小程序内的跳转链接 --> 
<navigator url="/pages/list/list">

在小程序中,如果需要进行跳转,需要使用 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" 时不支持传参

4.5.swiper 和 swiper-item 组件

在进行网页开发的时候,实现轮播图的时候,我们通常先使用 HTML 、CSS 实现轮播图的样式结构,然后使用 JS 控制轮播图的效果,或者直接使用插件实现轮播图的功能,而在小程序中实现小程序功能则相对简单很多。

  1. swiper:滑块视图容器,常用来实现轮播图,其中只可放置 swiper-item 组件,否则会导致未定义的行为

  2. swiper-item:仅可放置在swiper组件中,宽高自动设置为100%,代表 swiper 中的每一项

我们可以使用 swiper 组件提供的属性,实现轮播图的订制,常见属性如下:

属性说明类型
indicator-dots是否显示面板指示点boolean (默认 false)
indicator-color指示点颜色color (默认:rgba(0, 0, 0, .3))
indicator-active-color当前选中的指示点颜色color (默认:#000000)
autoplay是否自动切换boolean (默认 false)
interval自动切换时间间隔number (默认 5000)
circular是否采用衔接滑动boolean (默认 false)
其他属性...
4.6.scroll-view 组件 

可滚动视图区域,适用于需要滚动展示内的场景,它可以在小程序中实现类似于网页中的滚动条效果,用户可以通过手指滑动或者点击滚动条来滚动内容,scroll-view 组件可以设置滚动方向、滚动条样式、滚动到顶部或底部时的回调函数等属性,可以根据实际需求进行灵活配置。

//横向滚动
<view class="hot">
  <scroll-view class="scroll-x" scroll-x>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </scroll-view>

//纵向滚动
  <scroll-view class="scroll-y" scroll-y>
    <view>1</view>
    <view>2</view>
    <view>3</view>
  </scroll-view>
</view>

5.字体图标的使用

在项目中使用到的小图标,一般由公司设计师进行设计,如果如果自行设计这些图标会比较麻烦且耗费时间,这时候我们就可以使用到阿里巴巴矢量图库,设计好以后上传到阿里巴巴矢量图标库,然后方便程序员来进行使用。

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

首先我们先找到所需的图标,加入到项目库,进入项目库中生成链接。也可以将字体图标库下载到本地

点击链接,会将生成的 CSS 在新的链接页面进行打开,ctrl + s,将该文件重命名为.wxss 后缀名,然后保存到项目根目录下的static 文件夹下。

 在全局样式文件app.wxss中导入fonts.wxss字体图标文件,然后获取到图标类名,在项目中使用即可,应用于页面
 

@import "./static/fonts.wxss";
<view class="myTest">
  <view class="iconfont icon-tuikuan"></view>
</view>

注意:使用字体图标可能会报错:

[渲染层网络层错误] Failed to load font http://at.alicdn.com/t/c/font_3946178_q5oidsl5xo.woff2?t=1680795910637 net::ERR_CACHE_MISS (env: Windows,mp,1.06.2303220; lib: 2.30.4)

**在控制台出现错误,会影响开发调试,解决方案是:将字体图标转换成 base64 的格式**

 


6. 背景图片的使用

当编写小程序的样式文件时,我们可以使用 background-image 属性来设置一个元素的背景图像,但是小程序的 background-image 不支持本地路径。

<view class="image"></view>

.image {
  background-image: url('../../static/微信.jpg');
}

本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签  

  • 26
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值