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

@[toc]

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

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

3.1视图容器组件

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

3.1.1视图容器view

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

【示例3-1】

（1）新建一个项目components，用于本节的代码展示。（2）清空index.wxml和index.js的代码，并输入以下代码：

//index.wxml
<view>小程序视图组件测试view>
<button
style="margin-top:15px"
bindtap="testView">viewbutton>
<button
style="margin-top:15px"
bindtap="testScrollView">scroll-viewbutton>
<button
style="margin-top:15px"
bindtap="testMovableView">movable-viewbutton>
<button
style="margin-top:15px"
bindtap="testCoverView">cover-viewbutton>
<button
style="margin-top:15px"
bindtap="testSwiper">swiperbutton>

//index.wxss
view{
margin:16px;
 }

//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）运行代码，首页效果如下图所示。在接下来的小节里，我们将通过点击不同的按钮进入到对应的组件展示中。

（4）接下来新建一个页面view，用来展示本小节的内容，代码如下：

//view.wxml

<view>视图容器测试view>
<view
class="parent-view"
hover-class="hover-view" hover-start-time="1000" hover-stay-time="2000">
<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;
}

运行效果如图所示。

【代码解析】我们给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的自带属性如表所示。

【示例3-2】

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

//scroll-view.wxml
<text>\n横向滚动text>
<scroll-view scroll-x>
aaview>
bbview>
ccview>
scroll-view>
<text>\n纵向滚动text><scroll-view scroll-y>
aaview>
bbview>
ccview>
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;
}

运行效果如图所示

【代码解析】

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

3.1.3可移动视图movable-view

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

【示例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>

运行效果如图所示。

【代码解析】

这个组件的代码比较少微信小程序组件传值，我们只需要设置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的自带属性如表所示。

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>

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

3.1.5滑块视图swiper

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

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

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

 // cover-view.wxml 
<swiper
autoplay
indicator-dots
interval="3000"
duration="2000"
easing-function="easeInOutCubic"><swiper-item>
<view class="item-view">Aview>
swiper-item>
<swiper-item>
<view class="item-view">Bview>swiper-item><swiper-item>
Cview>
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;
}

运行效果如图所示。

【代码解析】

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

3.2内容组件

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

3.2.1图标icon

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

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

【示例3-6】

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

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

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