【微信小程序】组件使用及属性参考

举报
xcc-2022 发表于 2022/07/29 15:46:24 2022/07/29
【摘要】 @[toc]小程序组件微信小程序的开发实际上也是前端开发的一种。我们想要开发一个前端程序,首先要做的就是创建美观的页面,然后处理好业务代码。在用户眼中首先会看到的是页面,而不会关心代码的实现,所以在学习前端开发时通常都是先从HTML、CSS入手,再去学习JavaScript。所以,本章先进行小程序组件的讲解。掌握了视图容器组件、内容组件,并学会使用导航组件进行跳转后,我们就可以开始搭建各种页...

@[toc]

小程序组件微信小程序的开发实际上也是前端开发的一种。我们想要开发一个前端程序,首先要做的就是创建美观的页面,然后处理好业务代码。在用户眼中首先会看到的是页面,而不会关心代码的实现,所以在学习前端开发时通常都是先从HTML、CSS入手,再去学习JavaScript。所以,本章先进行小程序组件的讲解。掌握了视图容器组件、内容组件,并学会使用导航组件进行跳转后,我们就可以开始搭建各种页面了。

本章主要涉及的知识点有:

  • 视图容器组件
  • 内容组件
  • 导航组件
  • 小程序UI框架

3.1 视图容器组件

视图容器组件的主要作用就是“容器”,与按钮、文字、进度条等组件不同,它主要由普通视图、滑动视图、拖动视图等构成,就像我们在画图时的一个个背景画布。

3.1.1 视图容器view

view是最基本的视图容器,与前端的div标签比较类似,自身没有任何大小颜色属性,通常作为一个基本容器存在。view的自带属性如表3.1所示。

image-20220719170818299

【示例3-1】

(1)新建一个项目components,用于本节的代码展示。(2)清空index.wxmlindex.js的代码,并输入以下代码:

//index.wxml
<view>小程序视图组件测试</view>

<button
style="margin-top:15px"
bindtap="testView">view</button>

<button
style="margin-top:15px"
bindtap="testScrollView">scroll-view</button>

<button
style="margin-top:15px"
bindtap="testMovableView">movable-view</button>

<button
style="margin-top:15px"
bindtap="testCoverView">cover-view</button>

<button
style="margin-top:15px"
bindtap="testSwiper">swiper</button>
//index.wxss
view{
margin:16px;
 }

image-20220719175012276

//index.js
testview(){
    wx.navigateTo({
    url:'../view/view',})},
    testscrollView(){ wx.navigateTo({
    url:'../scroll-view/scroll-view'})
    
    testMovableView(){
    wx.navigateTo({
    url:'../movable-view/movable-view',})},
    testCoverView(){ wx.navigateTo({
    url:'../cover-view/cover-view',})},
    testSwiper(){ wx.navigateTo({
    url:'../swiper/swiper',})}}
    ...

(3)运行代码,首页效果如下图所示。在接下来的小节里,我们将通过点击不同的按钮进入到对应的组件展示中。

image-20220719175220438

(4)接下来新建一个页面view,用来展示本小节的内容,代码如下:

//view.wxml
<!--pages/view/view.wxml-->

<view>视图容器测试</view>

<!--父级view--><view
class="parent-view"
hover-class="hover-view" hover-start-time="1000" hover-stay-time="2000">

<!--子级view--><view
class="sub-view"
hover-stop-propagation="false"></view>

</view>

// view.wxss
.parent-view{
background-color:gray; 
    width:100%; 
    height:300px; 
    display:flex;
justify-content:center ;
    align-items:center;
}
.hover-view{
background-color:green;
}
.sub-view{
background-color:white; width:100px; height:100px;
}

运行效果如图所示。

image-20220719175125400

【代码解析】我们给parent-view设置了hover-class,在点击的时候颜色会发生变化。另外,延长了hover-start-time和hover-stay-time的时间,读者可以自行测试代码。最后sub-view中的hover-stop-propagation设置为false,所以点击中间白色部分是不会让parent-view变色的,如果想传递点击态,只需要改为true即可。

3.1.2 滚动视图scroll-view

介绍完了基本的视图容器,我们继续来看滚动视图容器——scroll-view。scroll-view的自带属性如表所示。

image-20220719175739939

【示例3-2】

由于scroll-view组件支持的属性特别多且大多不常用,因此我们只进行基本功能的展示,代码如下:

//scroll-view.wxml
<text>\n横向滚动</text>
<scroll-view scroll-x>
<viewclass="scroll-view-item-x">aa</view>
<viewclass="scroll-view-item-x">bb</view>
<viewclass="scroll-view-item-x">cc</view>
</scroll-view>

<text>\n纵向滚动</text><scroll-view scroll-y>
<viewclass="scroll-view-item-y">aa</view>
<viewclass="scroll-view-item-y">bb</view>
<viewclass="scroll-view-item-y">cc</view>
</scroll-view>

// scroll-view.wxss 
scroll-view{
width:100%; 
    height:100px;
	white-space: nowrap;
}
.scroll-view-item-x{
    background-color: #7FFFAA width:100%;
    line-height:100px; 
    font-size:35px;
    display:inline-block;
    text-align: center;
}

.scroll-view-item-y{
background-color: #E1FFFF; 
    heiqht:100px;
	line-height:100px; 
    font-size:35px;
	text-align: center;
}

运行效果如图所示

image-20220719180250780

【代码解析】
scroll-view的应用十分简单,我们写好标签后,使用scroll-x、scroll-y标记出是横向或纵向滚动,样式方面需要设置宽、高等属性,即可满足大多数需求。

3.1.3 可移动视图movable-view

在手机的使用中,拖动也是一种常见的操作。接下来我们展示一下如何使用可移动视图容器——movable-view。movable-view的自带属性如表所示。

image-20220719180407977

【示例3-3】

使用movable-view组件进行拖动方块的展示,代码如下:

// movable-view.wxml
<movable-area style="background-color: #7FFFAA; width: 1000; height:200px">
<movable-view style="background-color:white;width:50px;height:50px'"
direction="all"></movable-view>
</movable-area>

运行效果如图所示。

image-20220719180719359

【代码解析】
这个组件的代码比较少,我们只需要设置movable-area为背景板,并在里面创建一个movable-view即可进行拖动操作,拖动方向direction通常设置为all。movable-view必须在movable-area组件中,并且必须是直接子节点,否则不能移动。

3.1.4 覆盖视图

cover-viewcover-view是可以覆盖于原生组件之上的文本视图容器,可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher,并且可以与cover-view和cover-image进行嵌套。cover-view的自带属性如表所示。

image-20220719180816414

cover-view的属性也只有一个,不算是一个常用的组件。覆盖功能使用CSS的position也可以达到同样的效果,不过直接使用该功能也可以提高一些开发效率。

【示例3-4】

创建一个地图组件,并使用cover-view进行覆盖,代码如下:

// cover-view.wxml
<map style="width:100%; height:300px x; ">
  <cover-view>
<button style="margin: 15px; background-color: #7FFFAA;">刷新</button>
  </cover-view>
  </map>

image-20220719181113148

【代码解析】在map组件内设置cover-view,就相当于在一个画布里面,坐标会回到左上角,接下来正常编写自己要展示的内容并设置样式即可。

3.1.5 滑块视图swiper

swiper是滑块视图容器,一般可以用作轮播图等效果。目前市面中的App通常都会在首页顶部做一个轮播图,所以该组件还是很常用的。swiper的自带属性如表所示。

image-20220719181226339

easing-function的默认值为default,还支持linear(线性动画)、easeInCubic(缓入动画)、easeOutCubic(缓出动画)、easeInOutCubic(缓入缓出动画),读者可以根据喜好自行选择。【示例3-5】

swiper的属性比较复杂,我们挑选几个常用的来演示,代码如下:

 // cover-view.wxml 
<!--pages/swiper/swiper.wxml--><swiper
autoplay
indicator-dots
interval="3000"
duration="2000"
easing-function="easeInOutCubic"><swiper-item>
<view class="item-view">A</view>
</swiper-item>
<swiper-item>
<view class="item-view">B</view></swiper-item><swiper-item>
<viewclass="item-view">C</view>
</swiper-item></swiper>
// swiper.wxss
/* pages/swiper/swiper.wxss */

swiper {
height:200pxi}

.item-view{
	background-color: #7FFFAA; 
    height:200px;
	line-height:200px; font-size:25px;
	text-align: center;
}

运行效果如图所示。

image-20220719181516111
【代码解析】
swiper设置了自动滚动、显示指示器、切换间隔、切换速度、动画效果等属性,这些都可以在表格中找到一一对应的解释。swiper-item是必须放在swiper中使用的,通常轮播图中会放置一些图片,为了方便演示,本例直接用ABC的文字进行替代。

3.2 内容组件

相较于视图组件,内容组件的内容会少很多。在微信小程序中,仅提供了icon(图标组件)、text(文本组件)、rich-text(富文本组件)、progress(进度条组件)。通常大家都会选择设置CSS样式来改变文字效果,所以富文本组件不是很常用。所以,在本节的学习中主要掌握图标、文本和进度条组件即可。

3.2.1 图标icon

其实,icon的功能实际上用image也可以实现,主要是小程序官方提供了很多内置的图标,方便开发者使用,而且这些图标与系统风格一致。icon的自带属性如表所示。

image-20220719181649106

icon的type属性对应的样式如表所示。

image-20220719181710532

【示例3-6】

在演示代码之前,我们先修改index.wxml和index.js,增加基础内容组件的演示按钮。

 // index.wxml
<view style="margin-top:15px">小程序基础内容组件测试</view>
<button
style="margin-top:15px"
bindtap="testIcon">icon</button>

<button
style="margin-top:15px"
bindtap="testProgress">progress</button>

<button
style="margin-top:15px"
bindtap="testText">text</button>
// index.js

···
testIcon() {
	wx.navigateTo({
	url:'../icon/icon',})
}testProgress(){
    wx.navigateTo({
    url:'../progress/progress',})
}testText(){
	wx.navigateTo({
	url:'../text/text',})
}

首页效果如图所示。

image-20220719182036134

接下来继续演示icon组件。它的属性不多,这里直接演示3个属性效果,代码如下:

// icon.wxml
<!--pages/icon/icon.wxml-->
<view class="icon-type">
<icon wx:for="{{iconType}}" type="{{item}}" size="40" /></view>

<view class="icon-size">
<icon wx:for="{{iconSize}}" type="success" size="{{item}}" />
</view>

<view class="icon-color">
<icon wx:for="{{iconColor}}" type="success" size="40" color="{{item}}"
/>
</view>
// icon.js
···
data:{
iconType:[
'success','success no circle','info','warn','waiting','cancel'
'download', 'search','clear'
],
iconSize:[203040506070], iconColor:[
'red','orange','yellow','green','rgb(0,255,255)','blue','purple]}
···

运行效果如图所示。

image-20220719182309344

【代码解析】
第1个view用于样式不同的type样式,第2个view演示尺寸的变化,最后一个是颜色的变化。

3.2.2 进度条progress

progress是进度条组件。在日常开发中,进度条是十分常见的,需要用户等待的地方基本都要使用一个进度条。progress的自带属性如表所示。

image-20220719182351746

【示例3-7】

使用progress组件创建一个从0到100的进度条,代码如下:

// progress.wxml
<!--pages/icon/icon.wxml-->

<proqress percent="{{percent}}" stroke-width="12" show-info active />

// progress.js
...
data:{
percent:0}/**
*生命周期函数--监听页面加载*/
onLoad:function (options){
this.setData({ percent:100})},
···

运行效果如图所示。

image-20220719182549336

【代码解析】
我们通过percent控制百分比,通过stroke-width调整宽度,通过show-info显示进度,最后的active也是不可少的,否则进度会没有动画直接跳到100%。从图中可以看到进度到了27%。读者可以自行运行代码,看看进度条的动画。

3.2.3 文本text

text是最基础的文本组件。它提供了一些方便的属性,所以需要处理文字的时候尽量使用text而非view组件。text的自带属性如表所示。

image-20220719182643713

【示例3-8】

使用text组件演示selectable和space属性,代码如下:

//text.wxml
<!--pages/text/text.wxml-->

<text selectable>可选文本\n</text>
<text>A 不支持多空格\n</text> 

<text space="ensp">B 中文字符空格一半大小\n</text>

<text space="emsp">C 中文字符空格大小\n</text>

<text space="nbsp">D 根据字体设置的空格大小</text>

运行效果如图所示

image-20220719182917859

【代码解析】
从中可以看出,设置了selectable之后,长按这块文字即可选中。A、B、C、D四行文字分别对应了空格设置的状态,对照表格的说明查看即可。

3.3 导航组件

在前面的章节中,我们讲过页面跳转的两种方式。本节详细讲一下导航组件navigator。该组件除了跳转功能以外,还包括了跳转小程序等功能,所以单独拿出来讲解。navigator组件通过设置链接和跳转方式来完成页面、小程序间的跳转。navigator的自带属性如表所示。

image-20220719183052331

open-type的合法值如表所示。

image-20220719183139395

【示例3-9】

在index.wxml中新增一个页面跳转,测试跳转页为view,代码如下:

//index.wxml
···
<view style="text-align: center;">
<navigator url="/pages/view/view">跳转到新页面</navigator>
</view>

运行效果如图所示

image-20220719183434610

【代码解析】
点击图中的“跳转到新页面”按钮即可完成跳转。这种跳转方式可以有效减少JS文件中的代码数量。如果跳转业务逻辑比较简单,推荐使用navigator进行跳转。

3.4 小程序UI框架

学习完基本的组件用法后,再来看看UI框架。在前端开发的时候,我们通常会选择一套UI框架,让自己的效率突飞猛进。微信小程序没有前端那么长的历史,选择上会稍微少一些,这里就挑选一些比较出名的框架进行推荐。这些UI框架都可以在微信中搜到演示小程序,以便开发者查看其UI风格。

3.4.1 WeUI

WeUI是微信官方团队为微信小程序量身设计的一套UI,与微信原生样式十分契合,更新比较及时,功能比较简约,只包括一些常见的UI组件,样式如图所示。

官方网站

image-20220719183630902

3.4.2 iView

iView是由基于Vue.js的View UI框架改编过来的优质UI框架,作者是TalkingData团队。该UI框架功能丰富、样式美观,是一个值得一试的选择,样式如图所示。官方网站:https://github.com/TalkingData/iview-weapp。

image-20220719183655605

3.4.3 Vant Weapp

Vant Weapp是有赞团队的移动端组件库Vant的小程序版本,两者的UI样式基本相同,提供一致的API接口,是习惯于使用Vant的用户的首选。Vant Weapp的样式如图所示。官方网站:https://github.com/youzan/vant-weapp。

image-20220719183758569

3.5 小结

本章介绍了微信小程序的视图容器与基础内容组件,并推荐了几个常用的小程序UI框架。从内容上来说,本章的知识点还是比较重要的,后面的开发中几乎时时都要用到。虽然本章有大量的表格与零散的知识点,但是并不需要全部背下来再学习后面的内容。我们在日常开发中遇到了问题,回过头来复习一下也可以解决问题,用多了自然会熟记于心。

微信图片_20220616222230

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。