小程序学习笔记四：页面文件详解之视图层组件与自定义组件

视图层组件：

组件是视图层的基本组成单元。

组件自带一些功能与微信风格的样式。

一个组件通常包括

开始标签

和

结束标签

、

属性

用来修饰这个组件，

内容

在两个标签之内。

使用格式为：

<tagname property="value">
内容...
</tagname>

组件的通用属性：所有组件都拥有的属性

属性名	类型	描述	注解
id	String	组件的唯一标示	保持整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind* / catch*	EventHandler	组件的事件	详见事件

组件分类：组件分为 微信小程序基础组件 和 自定义组件。

基础组件

基础组件分为七大类：

一：视图容器类

基本容器：view

滚动视图容器：scroll-view（

tip

: 请勿在

scroll-view

中使用

textarea

、

map

、

canvas

、

video

组件

tip

:

scroll-into-view

的优先级高于

scroll-top

tip

: 在滚动

scroll-view

时会阻止页面回弹，所以在

scroll-view

中滚动，是无法触发

onPullDownRefresh

tip

: 若要使用下拉刷新，请使用页面的滚动，而不是

scroll-view

，这样也能通过点击顶部状态栏回到页面顶部

使用竖向滚动时，需要给

<scroll-view/>

一个固定高度，通过 WXSS 设置 height。）

滑块视图容器（轮播器）：swiper

可拖动组件：movable-area指定一个区域，movable-view创建一个容器，该视图容器可以在movable-area内自由拖动。

覆盖视图容器：覆盖在原生组件之上的文本视图，可覆盖的原生组件包括

map

、

video

、

canvas

、

camera

，只支持嵌套

cover-view

、

cover-image

。【例如：我们可以在video上覆盖两个按钮图片，定义点击事件控制video的播放与暂停】

二：基础组件

图标组件：icon。【通过type属性，指定图标的类型。主要有：success, success_no_circle, info, warn, waiting, cancel, download, search, clear】

文本组件：text。

富文本组件：rich-text。富文本组件通过 树 结构来组织内容。nodes 类型有三种：Array / HTML String。节点类型：

结点类型：type = node

name 标签名 String 是 支持部分受信任的HTML结点

attrs 属性 Object 否 支持部分受信任的属性，遵循Pascal命名法

children 子结点列表 Array 否 结构和nodes一致

结点类型：type = text

text 文本 String 是 支持entities

nodes: "<h1 style='color:red;'>html标题</h1>", //html字符串类型
nodes1: [{ //简单数组类型：有一个子节点
name: "h1",
attrs: {
style: "color:red",
class: "red"
},
children: [{
type: "text",
text: '结点列表标题'
}]
}],
nodes2: [{//复杂数组类型：有多个子节点
name: "ul",
attrs: {
style: "padding:20px;border:1px solid blue;",
class: "red"
},
children: [
{
name: "li",
attrs: {
style: "color:red",
class: "red"
},
children: [{
type: "text",
text: '多层结点 无序列表'
}],
}, {
name: "li",
attrs: {
style: "color:red",
class: "red"
},
children: [{
type: "text",
text: '多层结点 无序列表1'
}],
}]
}]

进度条组件：progress。通过改变属性值来改变进度条状态。

三：导航组件

页面跳转组件：navigator。

属性：

url	String		应用内的跳转链接
open-type	String	navigate	跳转方式
delta	Number		当 open-type 为 'navigateBack' 时有效，表示回退的层数
hover-class	String	navigator-hover	指定点击时的样式类，当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒

open-type：

navigate	对应 wx.navigateTo 的功能，跳转
redirect	对应 wx.redirectTo 的功能，重定向
switchTab	对应 wx.switchTab 的功能，切换tab
reLaunch	对应 wx.reLaunch 的功能，重新加载
navigateBack	对应 wx.navigateBack 的功能，返回

四：多媒体组件

音频组件：audio，可以通过按钮组件等绑定事件来控制播放、暂停、停止。

视频组件：video，可以通过一系列属性来设置播放器。

图片组件：image，支持多种缩放模式、懒加载等。

相机组件：camera，调用系统相机（前置摄像头、后置摄像头）

观看直播组件：live-player，实时音视频播放。

直播推流组件：live-pusher，实时音视频录制、推送，进行直播。

五：地图组件

map：地图组件，可以在上面标记地点、绘制气泡等。

六：绘图组件

canvas：画布，可以在上面进行涂鸦，主要是通过跟踪手指动作事件来实现的。

canvas-id	String		canvas 组件的唯一标识符
disable-scroll	Boolean	false	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart	EventHandle		手指触摸动作开始
bindtouchmove	EventHandle		手指触摸后移动
bindtouchend	EventHandle		手指触摸动作结束
bindtouchcancel	EventHandle		手指触摸动作被打断，如来电提醒，弹窗
bindlongtap	EventHandle		手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}

七：开放组件

开放数据：open-data，用于展示微信开放的数据。

内置浏览器：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。

八：表单组件

表单：form。将组件内的用户输入的

<switch/>

<input/>

<checkbox/>

<slider/>

<radio/>

<picker/>

提交。

按钮组件：button。

单选按钮组件：radio-group、radio。

多选框组件：checkbox-group、check-box。

输入组件：input。

多行输入文本框组件：textarea。

标签组件：label。

底部弹起的选择器（列表选择器）：picker，支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

嵌入页面的滚动选择器：picker-view，可以上下滚动选择内容的选择器。

滑动选择器（拖动进度条来选择）：slider。

开关组件：switch。

自定义组件

将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

一：创建自定义组件

类似于页面，一个自定义组件由

json

wxml

wxss

js

4个文件组成。

1：配置自定义组件

创建自定义组件后，json文件会自动生成，其中会包含组件的配置信息：

{
"component": true
}

2：编写组件wxml模版文件

<view class="">
<view>组件内部view内容</view>
<slot></slot> //用于承载组件引用时提供的子节点。
</view>

这里需要注意的是slot：slot为组件提供了一个空间，可以在页面wxml引用组件模版时，嵌入一个view到slot处。

<view>
<组件名 参数1=值1，参数2=值2...> //标签属性键值对是自定义组件wxml中用到的变量
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
</组件名>
</view>

【slot可以不要，删掉即可】

3：编写组件的wxss样式文件

组件样式需要注意的是:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器，而是采用 class选择器。

4：编写组件的构造器（js文件）

在js文件中定义组件的属性、数据、方法等。

properties	Object Map	否	组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
data	Object	否	组件的内部数据，和 properties 一同用于组件的模版渲染
methods	Object	否	组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见 组件事件
behaviors	String Array	否	类似于mixins和traits的组件间代码复用机制，参见 behaviors
created	Function	否	组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用 setData
attached	Function	否	组件生命周期函数，在组件实例进入页面节点树时执行
ready	Function	否	组件生命周期函数，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）
moved	Function	否	组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
detached	Function	否	组件生命周期函数，在组件实例被从页面节点树移除时执行
relations	Object	否	组件间关系定义，参见 组件间关系
options	Object Map	否	一些组件选项，请参见文档其他部分的说明

5：组件事件同页面事件：在wxml中绑定，在js文件中实现事件响应函数。

二：使用自定义组件

1：在页面配置文件page.json中引入组件

{
"usingComponents": {
"组件名": "组件路径"
}
}

2：在页面wxml文件中使用组件名创建组件，并且在标签中通过属性配置组件需要用到的数据

<view class="">
<组件名 参数1=值1，
参数2=值2，
。。。。。。>
</组件名>
</view>

3：在页面js文件中获取组件对象，并且调用组件函数

const app = getApp()

Page({

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
//获得组件对象
this.组件名 = this.selectComponent("#组件名");
},

/**
*定义函数：调用组件的方法
*/
funcName:function(){
this.组件名.func(param...)
},
})