关于微信小程序（常用的组件）

常用的组件

1、view与scroll-view组件

- view组件
view组件是微信小程序种主要的容器组件，相当于传统网页中的div，可以用来存放其他任何的子元素
例如：

 <view class='container'>
 <view>
 未曾青梅 青梅枯萎 芬芳满地
 </view>
 </view>

更多关于view组件的属性可以参阅官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

• scroll-view组件
  有时我们的一些视图，在手机指定的宽度和高度不够存放，这时就可以放在scroll-view组件中

设置横向滚动

1、给scroll-view添加scroll-x=‘true属性’
2、给scroll-view添加white-space：nowrap样式
3、给scroll-view的子元素添加display：inline-block属性

示例代码如下：

<!--index.wxml--> 
<scroll-view class='scroll-x-view' scroll-x>
  <view class='scroll-view-item bg_red'> </view>  
  <view class='scroll-view-item bg_blue'></view>  
  <view class='scroll-view-item bg_green'></view>  
  <view class='scroll-view-item bg_yellow'></view> 
 </scroll-view>

/**index.wxss**/ 
.scroll-x-view {
  width: 100%;
  height: 100px;  
  background: gray;
  white-space: nowrap;//（默认值）单行显示 
}
.scroll-x-view .scroll-view-item {
  width: 200px;  
  height: 100px;  
  display: inline-block 
}
.bg_red {  
background: red; 
}
.bg_blue {  
background: blue; 
}
.bg_green {  
background: green; 
}
.bg_yellow {  
background: yellow; 
}

效果：

设置竖向滚动

1、给scroll-view设置scroll-y=‘true’
2、个体scroll-view设置高度

示例代码：

<!--index.wxml--> 
<scroll-view class='scroll-x-view' scroll-y>  
<view class='scroll-view-item bg_red'></view>  
<view class='scroll-view-item bg_blue'></view>  
<view class='scroll-view-item bg_green'></view>  
<view class='scroll-view-item bg_yellow'></view> 
</scroll-view>

/**index.wxss**/ 
.scroll-x-view {  
width: 100%;  
height: 200px;  
background: gray; 
} 
.scroll-x-view .scroll-view-item {  
width: 100%;  
height: 100px; 
} 
.bg_red {  
background: red; 
} 
.bg_blue {  
background: blue; 
} 
.bg_green {  
background: green; 
} 
.bg_yellow {  
background: yellow; 
}

效果：

scrolltoupper和scrolltolower事件

鼠标滚动到距离左边或者顶部、鼠标滚动多距离右边或者底部多少距离的时候会执行这个事件，默认的间隔是50像素

示例：

 <!--index.wxml--> 
 <scroll-view class='scroll-x-view' scroll-y bindscrolltolower="scrolltolower ">  <view style="height:1000px;">  
 </view> 
 </scroll-view>

/**index.wxss**/ 
.scroll-x-view {  
width: 100%;  
height: 200px;  
background: gray; 
}

// index.js 
// ֺ获取应用实例 
const app = getApp()
Page({  
scrolltolower: function(event) {    
console.log(event);  
} 
});

效果：当用户鼠标滚动到最下面时，会在控制台输出事件对象

bindscroll事件

只要scroll-view发生了滚动，就会执行这个事件

示例：

<!--index.wxml--> 
<scroll-view class='scroll-x-view' scroll-y bindscroll="scrollEvent">  
<view style="height:1000px;">  </view> 
</scroll-view>

/**index.wxss**/
.scroll-x-view {  
width: 100%;  
height: 200px;
background: gray; 
}

// index.js 
// ֺ获取应用实例
const app = getApp()
Page({  
scrollEvent: function(event) {    
console.log(event);  
} 
});

有关scroll-view的更多说明请参阅官方文档：https://developers.weixin.qq.com/miniprogram /dev/component/scroll-view.html

2、swiper组件

swiper是一个包裹轮播图的容器组件，里面的子元素必须是swiper-item组件，swiper可以自动的轮播子元素，并且天生就带有指示点，还可以使用手指左右滑动

示例代码：

<!--index.wxml--> 
<swiper class='swiper' autoplay indicator-dots indicator-color='black' indic ator-active-color='red'>  
<swiper-item>    
<image src='https://static-image.xfz.cn/1539770831_872.jpg'></image>  </swiper-item>  
<swiper-item>    
<image src='https://static-image.xfz.cn/1541147489_121.jpeg'></image>  </swiper-item>  
<swiper-item>    
<image src='https://static-image.xfz.cn/1539770831_872.jpg'></image>  </swiper-item>  
<swiper-item>    
<image src='https://static-image.xfz.cn/1541147489_121.jpeg'></image>  </swiper-item> 
</swiper>

/**index.wxss**/
.swiper image {
  width: 100%;  
  height: 100%; 
}

效果：

swiper常用属性

在上面示例中，涉及到的swiper属性说明如下：

• auto-play：自动播放
• indicator-dots：是否显示小圆点
• indicator-color：小圆点的颜色
• indicator-active-color：当前小圆点的颜色
  （indicator：指示，标志）

更多关于swiper组件的属性可以参阅官方文档：https://developers.weixin.qq.com/mini program/dev/component/swiper.html

3、movable-view组件

正常情况下，一个组件设置了之后，如果不通过js或者css动画，是很难事现移动效果的，如果有些组件我们设置完成后想要能够移动，我们就可以接住mowable-view组件来实现

• movable组件基本用法
• movable组件常见属性

movable-view组件，是可以移动的容器，但是这个容器必须放在mova-area容器中才能够使用，因此这两个组件配合使用才能够实现移动效果

示例代码：

<!--index.wxml--> 
<movable-area class="area" scale-area>  
<movable-view class='view' direction="all" inertia out-of-bounds damping=" 10" friction="0" scale> 
微信小程序
</movable-view> 
</movable-area>

/**index.wxss**/
.area {  
width: 200px;  
height: 200px;  
background: blue; 
}
.area .view {  
width: 100px;  
height: 100px;  
background: red; 
}

效果：

movable组件常用属性：

在上面的示例中，所涉及到的movable-view组件的属性说明如下：

• direction：移动方向，默认值为all，表示朝哪个方向都可以移动
• inertia：是否带有惯性
• out-of-bonds：超出区域后，是否还能够移动，默认值为false
• damping：阻尼系数，阻尼越大移动越快
• friction：摩擦系数，值越大摩擦力越大，滑动越快停止
• scale：是否支持双指缩放，默认缩放手势生效区域实在movable-view内

关于movable-view组件更多属性说明，可参阅官方文档：https://developers.weixin.qq.co m/miniprogram/dev/component/movable-view.html

4、icon与text组件

• icon组件
• text组件

icon组件

icon组件的用法非常简单，只需要给icon标签添加相应的type值即可，例如：

<icon type="success" size="30" />

在这个icon标签中，对应的type值为success，拥有对应的图标，size代表此图标的大小
效果：

更多关于icon组件有哪些type值，可参院官方文档：https://developers.weixin.qq.com/minipro gram/dev/component/icon.html

text组件

text组件类似于HTML中的span标签，也是一个行内元素

下面是text组件的用法示例：

<!--index.wxml--> 
<view>  
<view>    
<text>{{text}}</text>
    <button bindtap="add">add line</button>    
    <button bindtap="remove">remove line</button>  
</view> 
</view>

//index.js 
var initData = 'this is first line\nthis is second line' 
var extraLine = []; 
Page({  
data: {    
text: initData  
},  
add: function (e) {    
extraLine.push('other line')    
this.setData({      
text: initData + '\n' + extraLine.join('\n')    
})  
},  
remove: function (e) {    
if (extraLine.length > 0) {      
extraLine.pop()      
this.setData({        
text: initData + '\n' + extraLine.join('\n')      
})    
}  
} 
}）

效果：

使用text组件时有两个注意点：

• text组件是行内元素，在布局的时候是不会独占一行的
• 给text组件设置宽高是没有效果的，它的宽高是根据里面的文字来的

关于text组件的更多内容，请参阅官方文档：https://developers.weixin.qq.com/miniprogram /dev/component/text.html

5、自定义组件

自定义组件官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework /custom-component/

主要包含以下内容：

• 创建和使用自定义组件
• slot插槽
• 组件样式
• Component构造器
• 组件间通信
• 组件生命周期
• behaviors
• 组件间关系

创建和使用自定义组件

自定义组件一般会单独创建一个目录来存放，然后每一个自定义组件也会有一个对应的目录，如下：

接下来书写自定义组件的相关代码：

<!--components/mycom/mycom.wxml-->
<view>  
<text>这是一个自定义组件</text> 
</view>

mycom.json
{  
"component": true,  
"usingComponents": {} 
}

在mycom.json文件中，我们需要把component属性设置为true，表示这是一个自定义组件

自定义组件代码书写完成后，在需要使用该组件的页面来引用自定义组件，例如，我想要在index页面中用到mycom组件，引用代码如下：

<!--index.wxml--> 
<view class='container'>  
<view> 欢迎来到首页 </view>  
<mycom></mycom> 
</view>

index.json
{  
"usingComponents": {    
"mycom": "../../components/mycom/mycom"  
} 
}

在index.json文件中，需要给usingComponent属性设置自定义组件的路径
效果：可以看到在index页面中已经成功引入了mycom组件

有些时候，自定义组件中的内容并不是定死了的，而是通过引用该组件的页面传递过去的，这个时候可以用 {{}} 来表示一个内容占位，如下：

<!--components/mycom/mycom.wxml--> 
<view>  
<text>{{ content }}</text> 
</view>

在自定义组件的js文件中，需要使用Component（）来注册组件，并提供组件的内部数据，属性定义，和自定义方法

在下面的Component（）方法中，我们书写属性content的对应的类型和默认值，如下：

// components/mycom/mycom. js
Component({
/**
*组件的属性列表
*/
properties: {
//这里定义了content属性，属性值可以在组件使用时指定
content:{
type: String,
value: ' default value '
}
}，
/**
*组件的初始数据
data: {
}，
/** 
*组件的方法列表
*/
methods: {
}
})

接下来在index页面中引用该组件，如果指定列content属性，就使用该属性所传递的值，否则使用默认值：

<!-- index. wxm1-->
<view class= ' container'>
<view>欢迎来到首页</view>
<!--指定content 属性的值-->
<mycom content="this is a test"></mycom>
</view>

效果：

<!-- index. wxml-->
<view class= ' container'>
<view>欢迎来到首页</view>
<!--使用默认值-->
<mycom></mycom>
</view>

效果：

slot插槽

组件模板的写法与页面模板相同，组件模板与组件数据结合后生成的节点树，将被插入到组件引用的位置上，在组件模板中可以提供一个slot节点，用于承载组件引用时提供的子节点。

示例如下：

<!--components /mycom/mycom.wxm1-- >
<view>
<!--设置一个插槽--> 
<slot></slot>
<text>{{ content }}</text>
</view>

在使用自定义组件时，标签之间的内容会被插入到插槽中：

<! -- index. wxm1-- >
<view class= 'container'>
<view>欢迎来到首页</view>
<mycom content="this is a test">这部分内容会被放入插槽</mycom>
</view>

效果：

默认情况下，一个组件的wxml文件中只能有一个slot，若要使用多个，可以在组件的js文件中声明启用：

// components/mycom/mycom. js
Component({
options: {
multipleSlots: true //在组件定义时的选项中启用多slot支持
},
/**
*组件的属性列表
*/
properties: {
//这里定义了innerText属性，属性值可以在组件使用时指定
content: {
type: String,
value: ' default value' ,
}
},
/**
*组件的初始数据
*/
data: {
},
/**
*组件的方法列表
*/
methods: {
}
})

接下来我们就可以在自定义组件中，书写多个slot插槽了，但是因为有多个，所以就要给予name属性用于区别：

<!--components/mycom/mycom. wxm1-- >
<view>
<!--第一个插槽-->
<slot name= 'one'></slot>
<text>{{ content }}</text>
<!--第二个插槽-->
<slot name= 'two'></slot>
</view>

效果：

组件样式

要给自定义组件添加样式，可以将样式书写在对应的wxss文件中,不过需要有以下几点需要注意：

• 组件和引用组件的页面，不能使用id选择器，属性选择器和标签名选择器，请改用class选择器
• 组件和引用组件的页面中使用后代选择器，在极端的情况下会有非预期的表现，如果遇到，请避免使用
• 子元素选择器，只能在view组件与其子节点之间使用，用于其他组件可能导致非预期的情况
• 继承样式，如font、color会从组件外继承到组件内
• 除继承样式外，app.wxss文件中的样式、组件所在页面的样式对自定义组件无效（除非更改组件样式隔离选项）

具体示例：
设置item样式：

/* components/mycom/mycom.wxss */ 
.item{  
color : red 
}

为mycom组件挂上item样式：

<!--components /mycom/mycom . wxml-->
<view class= ' item '>
<!--第一个插槽-->
<slot name= 'one'></slot>
<text>{{ content }}</text>
<!--第二个插槽-->
<slot name='two'></s lot>
</view>

效果：

更多内容可以参阅官方文档：https://developers.weixin.qq.com/miniprogram/dev/framewo rk/custom-component/wxml-wxss.html

Component构造器

Component({
behaviors: [],
properties: {
myProperty: { //属性名
type: String,
va lue:
},
myProperty2: String //简化的定义方式
},
data: {}， //私有数据，可用于模板渲染
lifetimes: {
//生命周期函数，可以为函数，或一个在methods 段中定义的方法名
attached() { },
moved() { }，
detached() { },
},
//生命周期函数，可以为函数，或一个 在methods段中定义的方法名
attached() { }， //此处attached的声明会被lifetimes字段中的声明覆盖
ready() { },
pageLifet imes: {
// 组件所在页面的生命周期函数
show() { },
hide() { },
resize() { },
},
methods: {
onMyButtonTap() {
this. setData({
//更新属性和数据的方法与更新页面数据的方法类似
})
},
//内部方法建议以下划线开头
_myPrivateMethod() {
//这里将data.A[0].B设为'myPrivateData'
this. setData({
'A[0].B': 'myPrivateData'
})
},
_propertyChange (newVal, oldVal) {
}
})

关于Component构造器各选项的具体用法，请参阅官网: https://developers.weixin.qq.co
m/miniprogram/dev/reference/api/Component.html

组件间通信

组件间的基本通信方式有以下几种：

• WXML数据绑定:用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容数据
  (自基础库版本2.0.9开始，还可以在数据中包含函数)
• 事件:用于子组件向父组件传递数据，可以传递任意数据。
• 如果以_上2种方式不足以满足需要，父组件还可以通过this.selectComponent方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法

下面来看一下父子组件之间传递数据的示例：

父组件向子组件传递数据

<!-- index.wxml-- >
<view class=' container'>
<view>欢迎来到首页</view>
<mycom content="this is a test" data-other="something"></mycom>
</view>

// components/mycom/mycom. js
Component({
properties: {
content: {
type: String,
value:
'default value',
}
}，
attached: function() {
console. log(this.properties.content); //获取父组件传递过来的值，this is a test
console. log(this.data.content); //用data也能访问properties, this is a test
//设置properties值用setData()
this.setData({
content:'改变了'
});
console.log(this.properties.content); //改变了
//通过dataset获取data-other的值
console.log(this.dataset.other); // something
}
})

控制台打印结果：

子组件向父组件传递数据：
子组件中的数据要传递给父组件，可以通过事件this.triggerEvent()来实行：

<!-- components/mycom/mycom.wxml-- >
<view>
<text>这是一个自定义组件</text>
<button bindtap='onTab'>点击之后触发事件</button>
</view>

在自定义组件中，我们为按钮绑定了一个点击事件，点击后会执行ontab

// components/mycom/mycom. js
Component({
methods: {
onTab: 
function() {
var mess = {
msg: '这是一个自定义组件'
};
this. triggerEvent( 'myevent', mess); //触发myevent事件
}
}
})

在ontab事件中，会出发一个myevent事件，并传递数据mess

<!-- index. wxml-->
<view class= 'container'>
<view>欢迎来到首页</view>
<mycom bindmyevent="doSth"></mycom>
</view>

在父组件中使用自定义组件（子组件）时，为子组件绑定了myevent事件，该事件的事件处理函数位于index.js中，如下：

//index.js 
//获取应用实例
const app = getApp()
Page({
data: {
},
//事件处理函数
doSth: function(e) {
console. log(e.detail);
}
})

最终，父组件获取到了子组件传递过来的数据：

更多信息可参阅官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework
/custom-component/events.html

组件生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在一些特殊的时间点或遇到一些特殊的框架事件时被自动触发

其中，最主要的生命周期是 created、attached、detached，包含一个组件实例生命流程的最主要时间点

• 组件实例刚刚被创建好时，created生命周期被触发。此时，组件数据this.data就是在Component构造器中定义的数据data。此时还不能调用setData。通常情况下，这个生命周期只应该用于给组件this添加一些自定义属性字段。
• 在组件完全初始化完毕、进入页面节点树后，attached
  生命周期被触发。此时，this.data已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
• 在组件离开页面节点树后，detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则detached会被触发。

生命周期函数使用示例：

Component({
lifetimes: {
attached() {
//在组件实例进入 页面节点树时执行
}，
detached() {
//在组件实例被从页面节点树移除时执行
}，
},
//以下是旧式的定义方式，可以保持对<2.2.3 版本基础库的兼容
attached() {
//在组件实例进入页面节点树时执行
},
detached() {
//在组件实例被从页面节点树移除时执行
},
// ...
})

更多信息可参考官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework
/custom-component/lifetimes.html

behaviors（行为）

behaviors是用于组件间代码共享的特性，每个behaviors可以包含一些属性、数据、生命周期函数和方法，组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在特定的时机被调用。每个组件可以引用多个behavior，behavior也可以引用其他behavior

behavior需要使用Behavior()构造器定义。
新建一个mybehavior,js文件，如下：

在文件中可以像书写组件一个书写属性、数据以及生命周期函数和方法：

// behaviors/my-behavior.js
module. exports = Behavior({
behaviors: [] ,
properties: {
myBehaviorProperty: {
type: String,
value:' this is a test'
}
}
})

接下来我们就可以在自定义组件中引入behavior：

// components/mycom/mycom.js
var myBehavior = require('../.. /behaviors/my-behavior.js');
Component({
behaviors: [myBehavior]
})

至此，在mybehavior.js中定义的属性、数据以及生命周期函数和方法，mycom组件中就都拥有了

mycom.wxml自定义组件代码如下:

<!--components/mycom/mycom.wxml--->
<view>
<text>{{ myBehaviorProperty }}</text>
</ view>

最后在index.html中引入自定义组件:

<!--index.wxml--->
<view class='container'>
<view>欢迎来到首页</view>
<mycom></mycom>
</view>

在index.wxml只用mycon组件，由于没有给myBehaviorProperty属性，所以会使用在mybehavior.js文件中所设置的默认值：

组件间关系

两个自定义组件间的嵌套关系(parent父 / child子/ ancestor祖先/ descendant子孙)，通过relations定义段来相互间的通信(必须在两个组件定义中都加入relations定义，否则不会生效)。

<!-- index. wxml -->
<custom-ul>
<custom-li> item 1 </custom-li>
<custom-li> item 2 </custom-li>
</custom-ul>

<!--mycom. wxml--->
<view class= 'wapper' >
<text>custom-ul</text>
<slot></slot>
</view>

<!-- children-component.wxml--->
<view>
<text>li-item</text>
<slot></slot>
</view>

// index. json
{
"us ingComponents": {
"custom-ul": ". ./component/ component"，
"custom-li": ".. /component/children-component"
}
}

// mycom.json
{
"component": true
}

// children-component. json
{
"component": true
}

// mycom.js
Component({
relations:{
'children-component': { //子组件相对路径
type:
'child', //关联的目标节点应为子节点
linked: function (target) {
// 每次有 custom-li 被插入时执行，target是该节点实例对象， 触发在该节点attached生命周期之后
console. log('--linked--' );
console. log(target);
},
linkChanged: function (target) {
//每次有custom-li被移动后执行，target 是该节点实例对象，触发在该节点moved生命周期之后
},
unlinked: function (target) {
//每次有custom-li被移除时执行，target 是该节点实例对象，触发在该节点detached生命周期之后
}
}
}，
methods: {
_getAllLi: function () {
//使用getRelationNodes 可以获得nodes数组，包含所有已关联的custom-li, 且是有序的
var nodes = this . getRelat ionNodes( 'children-component' );
console. log('--getAllLi--');
console. log(nodes);
},
ready: function () {
this._ getAllLi()
})

// children-component. js
Component({
data:{
name: 
' name
}，
relations: {
'component': { // 父组件相对路径
type: 'parent', //关联的目标节点应为父节点
linked: function (target) {
// 每次被插入到 custom-ul时执行，target 是custom-uZ 节点实例对象， 触发在attached生命周期之后
}，
linkChanged: function (target) {
//每次被移动后执行，target 是custom-uZ节点实例对象， 触发在moved生命周期之后
}，
unlinked: function (target) {
//每次被移除时执行，target 是custom-uZ节点实例对象，触发在detached生命周期之后
}
}
}
})

更多内容请参阅: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html