文章目录

前言
一、常用组件
- 1.view
- 2.text
- 2.image
- 3.swiper
- 4.navigator
- 5.rich-text
- 6.button
- 7.icon
- 8.radio
- 9.checkbox
二、自定义组件

前言

重点讲解⼩程序中常⽤的布局组件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

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

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

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

2.image

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

属性名	类型	默认值	说明
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&nbsp;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.自定义组件传参

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

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

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

4.命名规范

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

2、微信小程序-组件