2、微信小程序-组件

---

前言

重点讲解⼩程序中常⽤的布局组件view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox 等，以及如何自定义组件。

---

一、常用组件

1.view

代替传统 web中的div 标签，view组件是最常用的，也是最简单的视图容器。它是一个块级容器组件，它没有特殊的功能，主要用于布局展示，是布局中最基本的UI组件。几乎所有复杂的布局都可以通过嵌套view来实现。
view除了公共属性之外，还有以下几个私有属性：

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类,默认值没有点击效果
hover-stop-propagation	Boolean	false	指定是否阻止本几点的祖先节点出现点击态
hover-start-time	Number	50	按住多久出现点击态,单位毫秒
hover-stay-time	Number	400	手指松开后保持点击的状态,单位毫秒

<view  hover-class= "h-class">
</view>

2.text

1. ⽂本标签
2. 只能嵌套text
3. ⻓按⽂字可以复制 （只有该标签有这个功能）
4. 可以对空格 回⻋ 进⾏编码

属性名	类型	默认值	说明
selectable	Boolean	false	⽂本是否可选
decode	Boolean	false	是否解码

<text  selectable= "{{false}}"  decode= "{{false}}">
普&nbsp;通
</text>

2.image

1. 图⽚标签， image组件默认宽度320px、 ⾼度240px
2. ⽀持懒加载

属性名	类型	默认值	说明
src	String	false	图⽚资源地址
mode	String	scaleToFill	图⽚裁剪、 缩放的模式
lazy-load	Boolean	false	图⽚懒加载

其中mode有13种，其中 4 种是缩放模式， 9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横⽐缩放图⽚， 使图⽚的宽⾼完全拉伸⾄填满 image 元素
缩放	aspectFit	保持纵横⽐缩放图⽚， 使图⽚的⻓边能完全显⽰出来。
缩放	aspectFill	保持纵横⽐缩放图⽚， 只保证图⽚的短边能完全显⽰出来。
缩放	widthFix	宽度不变， ⾼度⾃动变化， 保持原图宽⾼⽐不变
裁剪	top	不缩放图⽚， 只显⽰图⽚的顶部区域
裁剪	bottom	不缩放图⽚， 只显⽰图⽚的底部区域
裁剪	center	不缩放图⽚， 只显⽰图⽚的中间区域
裁剪	left	不缩放图⽚， 只显⽰图⽚的左边区域
裁剪	right	不缩放图⽚， 只显⽰图⽚的右边区域
裁剪	top left	不缩放图⽚， 只显⽰图⽚的左上区域
裁剪	top right	不缩放图⽚， 只显⽰图⽚的右上区域
裁剪	bottom left	不缩放图⽚， 只显⽰图⽚的左下区域
裁剪	bottom right	不缩放图⽚， 只显⽰图⽚的右下区域

3.swiper

微信内置轮播图组件,默认宽度100%，高度150px

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显⽰⾯板指⽰点
indicator-color	Color	rgba(0, 0, 0, .3)	指⽰点颜⾊
indicator-active-color	Color	#000000	当前选中的指⽰点颜⾊
autoplay	Boolean	false	是否⾃动切换
interval	Number	5000	⾃动切换时间间隔
circular	Boolean	false	是否循环轮播

<swiper autoplay indicator-dots circular>
    <swiper-item >
      
    </swiper-item>
</swiper>

swiper是滑块视图的容器，swiper-item是滑块子项

4.navigator

导航组件 类似超链接标签

属性名	类型	默认值	说明
target	String	self	在哪个⽬标上发⽣跳转， 默认当前⼩程序， 可选值 self/miniProgram
url	String		当前⼩程序内的跳转链接
open-type	String	navigate	跳转⽅式

<navigator open-type="switchTab" url="/pages/index/index">index 首页</navigator>

跳转⽅式有6种，可以自行查阅微信开发文档。

5.rich-text

富文本标签,可以将字符串解析成 对应标签， 类似 vue中 v-html 功能
有两种加载方式，一个是通过字符串，一个是通过数组节点

//  1      index.wxml    加载 节点数组
<rich-text  nodes= "{{nodes}}"  bindtap= "tap"></rich-text>
//  2  加载 字符串
<rich-text  nodes= '<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/[email protected] ng"  alt="">'></rich-text>

//  index.js
Page({
data :  {
nodes :  [{
name :  'div'
attrs :  {
class :  'div_class',
style :  'line-height:  60px;  color:  red;'
},
children :  [{
type :  'text',
text :  'Hello World!'
}]
}]
},
tap()  {
console .log('tap')
}
})

nodes属性
nodes 属性⽀持 字符串

属性名	说明	类型	默认值	备注
name	标签名	string	是	⽀持部分受信任的 HTML 节点
attrs	属性	object	否	⽀持部分受信任的属性， 遵循 Pascal 命名法
children	⼦节点列表	array	否	结构和 nodes ⼀ 致

6.button

<button
type= "default"
size= "{{defaultSize}}"
loading= "{{loading}}"
plain= "{{plain}}"
>
default
</button>

按钮的样式属性

属性名	类型	默认值	备注
size	string	default	按钮的⼤⼩
type	string	default	按钮的样式类型
plain	boolean	false	按钮是否镂空， 背景⾊透明
disabled	boolean	false	是否禁⽤
loading	boolean	false	名称前是否带 loading 图标
form-type	string		⽤于组件， 点击分别会触发组件的submit/reset 事件
open-type	string		微信开放能⼒

按钮的功能属性，是微信开放能力

值	说明
contact	打开客服会话， 如果⽤⼾在会话中点击消息卡⽚后返回⼩程序， 可以从 bindcontact 回调中获得具体信息， 具体说明
share	触发⽤⼾转发， 使⽤前建议先阅读使⽤指引
getPhoneNumber	获取⽤⼾⼿机号， 可以从bindgetphonenumber回调中获取到⽤⼾信息，具体说明
getUserInfo	获取⽤⼾信息， 可以从bindgetuserinfo回调中获取到⽤⼾信息
launchApp	打开APP， 可以通过app-parameter属性设定向APP传的参数具体说明
openSetting	打开授权设置⻚
feedback	打开 “意⻅反馈”⻚⾯， ⽤⼾可提交反馈内容并上传⽇志， 开发者可以登 录⼩程序管理后台后进⼊左侧菜单 “客服反馈”⻚⾯获取到反馈内容

7.icon

属性名	类型	默认值	必填	备注
type	string	default	是	icon的类型， 有效值： success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的⼤⼩
color	string		否	icon的颜⾊， 同css的color

8.radio

单选按钮
需要搭配radio-group ⼀ 起使⽤

9.checkbox

checkbox 复选框
需要搭配checkbox-group ⼀ 起使⽤

二、自定义组件

类似vue或者react中的自定义组件，⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。

1.创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成，可以在微信开发者⼯具中快速创建组件的⽂件结构

1）声明组件
⾸先需要在组件的 SearchInput.json ⽂件中进⾏⾃定义组件声明

{
   "component" :  true
}

2)编辑组件
就和普通构建页面一样， 需要在组件的 wxml ⽂件中编写组件模板， 在 wxss ⽂件中加⼊组件样式
要注意的是：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

/*  这里的样式只应用于这个自定义组件 */
.inner  {
    color :  red;
}

3）注册组件

//这里的不再是 Page 而是 Component

Component({
  /**
   * properties是组件的属性列表,存放的是要从父组件中接收的数据
   */
  properties: {

    tabs:{
      //type 要接收数据的类型
      type:Array,
      //value 默认值
      value:[]
    }
  },

  /**
   * 组件的自定义初始数据，组件的内部数据
   */
  data: {
    
  },

  /**
   * 组件的方法列表
   * 在page.js当中，存放回调函数事件是放在data同层级下的
   * 在component.js，存放在methods当中
   */
  methods: {
    handleItemTab(e){}
  }

4）声明组件

⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。 还要提供对应的组件名和组件路径，例如我们需要在index.wxml里引入这个自定义组件，在index.json中进行声明：

{
	//  引用声明
	"usingComponents" :  {
	//  要使用的组件的名称     //  组件的路径
	"SearchInput" : "/components/SearchInput/SearchInput"
	}
}

然后就可以在xml页面中使用这个自定义组件：

<view>
<!--  以下是对一个自定义组件的引用 -->
<SearchInput></SearchInput>
</view>

2.自定义组件的属性

Component 构造器可⽤于定义组件， 调⽤ Component 构造器时可以指定组件的属性、 数据、 ⽅法
等。

定义段	类型	描述
properties	ObjectMap	组件的对外属性， 是属性名到属性设置的映射表
data	Object	组件的内部数据， 和 properties ⼀ 同⽤于组件的模板渲 染
observers	Object	组件数据字段监听器， ⽤于监听 properties 和 data 的变 化， 参⻅数据监听器
methods	Object	组件的⽅法， 包括事件响应函数和任意的⾃定义⽅法， 关于 事件响应函数的使⽤， 参⻅组件事件
created	Function	组件⽣命周期函数， 在组件实例刚刚被创建时执⾏， 注意此 时不能调⽤ setData ， 参⻅ 组件⽣命周期
attached	Function	组件⽣命周期函数， 在组件实例进⼊⻚⾯节点树时执⾏， 参 ⻅ 组件⽣命周期
ready	Function	组件⽣命周期函数， 在组件布局完成后执⾏， 参⻅ 组件⽣命 周期
moved	Function	组件⽣命周期函数， 在组件实例被移动到节点树另⼀个位置 时执⾏， 参⻅组件⽣命周期
detached	Function	组件⽣命周期函数， 在组件实例被从⻚⾯节点树移除时执 ⾏， 参⻅组件⽣命周期

3.自定义组件传参

1. ⽗组件通过的⽅式给⼦组件传递参数
2. ⼦组件通过的⽅式向⽗组件传递参数

传值的过程，以自定义Tabs组件为例，详细代码见demo：

1. 父组件把数据 {{tabs}} 传递到 ⼦组件的 tabItems
2. 父组件监听 handleItemChange 事件
3. 子组件 绑定 handleItemTab 事件，并触发 父组件的点击事件
   ⾃定义组件触发事件时， 需要使⽤ triggerEvent属性中⽅法， 指定 事件名 、 detail 对象，代码如下：
   this.triggerEvent(“itemChange”,{index})
4. ⽗ -> ⼦ 动态传值 this .selectComponent(“#tabs”);

4.命名规范

1. 标签名是 中划线的⽅式
2. 属性的⽅式 也是要中划线的⽅式，class=“”的属性名是下划线
3. 其他情况可以使⽤驼峰命名：
   组件的⽂件名如 myHeader .js 的等
   组件内的要接收的属性名 如 innerText

---