写点什么

【微信小程序】常用组件及基本使用详解

作者:陈橘又青
  • 2022 年 9 月 16 日
    陕西
  • 本文字数:1948 字

    阅读完需:约 6 分钟


🖐本节学习目标:✅学会使用常用的组件



1.常用的容器类组件的使用

1.view 组件的基本使用

🌏view 类似于 HTML 中的 div,实现了普通的视图区域。


🍁例如:使用 flex 实现横向布局。


<font color=blue>wxml 代码:</font>


<view class="container1"><view>A</view><view>B</view><view>C</view></view>
复制代码


<font color=green>wxss 代码:</font>


.container1 view{  width:100px;  height:100px;  text-align: center;  line-height: 100px;}
.container1 view:nth-child(1){ background-color: aquamarine;}.container1 view:nth-child(2){ background-color: azure;}.container1 view:nth-child(3){ background-color: darkorange;}
.container1 { display: flex; justify-content: space-around;}
复制代码


<font color=red>实现效果:</font>




2.scroll-view 组件的基本使用

🌏利用scroll-view可以实现滚动的效果,这个效果可以是上下滚动,也可以是左右滚动。


<font color=blue>wxml 代码:</font>


<scroll-view class="container1" scroll-y><view>A</view><view>B</view><view>C</view></scroll-view>
复制代码


<font color=green>修改的 wxss 代码:</font>


.container1 {  border:1px solid red;  height:110px;  /*使用scroll-view时设置固定的高度*/
复制代码


<font color=red>实现效果:</font>




3.swiper 和 swiper-item 组件的基本使用

🌏利用这两个组件可以实现轮播图效果:


<font color=blue>wxml 代码:</font>


<swiper class="swiper-container"><swiper-item><view class="item">A</view></swiper-item><swiper-item>  <view class="item">B</view></swiper-item><swiper-item>  <view class="item">C</view></swiper-item></swiper>
复制代码


<font color=green>wxss 代码:</font>


.swiper-container{  height:150px;}.item{  height:100%;  line-height: 150px;  text-align: center;}
swiper-item:nth-child(1) .item{ background-color: aquamarine;}swiper-item:nth-child(2) .item{ background-color: azure;}swiper-item:nth-child(3) .item{ background-color: darkorange;}
复制代码


<font color=red>实现效果:</font>



swiper 组件的常用属性



🍃例:显示面板指示色:


<swiper class="swiper-container" indicator-dots="true" >
复制代码



🍃例:指定指示点颜色和当前选中知识点颜色:


<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red">
复制代码



🍃例:设置自动切换,间隔设置为 1s:


<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000">
复制代码



采用衔接滑动:


<swiper class="swiper-container" indicator-dots="true" indicator-color="white" indicator-active-color="red" autoplay="true" interval="1000" circular>
复制代码


2.常用的基础内容组件的使用

1.text 组件的基本使用

🍁例:通过 text 组件的 user-select 属性,可以实现长按选中文本内容的效果。(之前使用的 selectable 已经被废弃!)


<view>长按可以选中文本内容:<text user-select>HelloWorld!</text></view>
复制代码


2.rich-text 组件的基本使用

🍁例:通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构。


<rich-text nodes="<h1 style='color:red'>标题</h1>"> </rich-text>
复制代码



在想要把 HTML 文档渲染为相应的 UI 结构时使用该组件。

3.其他常用的组件

1.button 组件的使用

🌏小程序中的按钮组件类似于 HTML 中的按钮组件,同时可以调用微信提供的丰富的功能,例如:获取用户信息,获取用户授权,转发等。


🍁例:使用 type 属性设置按钮的类型:


<button >默认按钮</button><button type="primary">主色调按钮</button><button type="warn">警告按钮</button>
复制代码



🍁例:使用 size 属性设置按钮的大小:


<button size="mini">默认按钮</button><button type="primary" size="mini">主色调按钮</button><button type="warn" size="mini">警告按钮</button>
复制代码



🍁例:使用 plain 属性设置镂空按钮:


<button plain>默认按钮</button><button type="primary" plain>主色调按钮</button><button type="warn" plain>警告按钮</button>
复制代码


2.image 组件的基本使用

wxml 代码:


<image src="/images/1.jpg"></image>
复制代码


wxss 代码:


image{  border: 5px solid black;}
复制代码


实现效果:



🍃image 组件的 mode 属性用来指定图片的裁剪和缩放模式,常用的 mode 属性值如下


4.总结

本节对几个常用的组件做一个总结,实际上小程序拥有十分丰富的组件库,在学习的过程中,就会慢慢接触并熟练!同时,组件的学习和使用也是小程序宿主环境的一个重要部分。小程序开发中我们也体会到了技术更新迭代的速度很快,所以必须持续的学习新的技术!

发布于: 刚刚阅读数: 4
用户头像

陈橘又青

关注

⭐代码传递思想,技术创造回响 2022.09.02 加入

⭐Java领域新星创作者,华为云享专家,阿里云社区专家博主

评论

发布
暂无评论
【微信小程序】常用组件及基本使用详解_小程序开发_陈橘又青_InfoQ写作社区