2、微信小程序-组件

文章目录

  • 前言
  • 一、常用组件
    • 1.view
    • 2.text
    • 2.image
    • 3.swiper
    • 4.navigator
    • 5.rich-text
    • 6.button
    • 7.icon
    • 8.radio
    • 9.checkbox
  • 二、自定义组件
    • 1.创建自定义组件
    • 2.自定义组件的属性
    • 3.自定义组件传参
    • 4.命名规范


前言

重点讲解⼩程序中常⽤的布局组件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个文件组成,可以在微信开发者⼯具中快速创建组件的⽂件结构
2、微信小程序-组件_第1张图片
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

你可能感兴趣的:(小程序)