微信小程序基础(四)

11. ⾃定义组件

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

11.1. 创建⾃定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成

可以在微信开发者⼯具中快速创建组件的⽂件结构

在⽂件夹内 components/header ，创建组件 名为 header

11.1.1. 声明组件

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

header.json

{
  "component": true, //现在的版本一创建就会自动填写
  "usingComponents": {}
}

11.1.2. 编辑组件

同时，还要在组件的 wxml⽂件中编写组件模板，
在 wxss⽂件中加⼊组件样式
slot 表⽰插槽，类似vue中的slot
header.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner"> 
	{{innerText}}
	<slot></slot>
</view>

在组件的 wxss ⽂件中编写样式
注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
myHeader.wxss

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

11.1.3.注册组件

在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并提供组件的属性定义、内部数据和⾃定义⽅法
header.js

// components/Header/header.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 这里用来接收父传子传过来的数据
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

11.2. 声明引⼊⾃定义组件

⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径
index.json

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

11.3. ⻚⾯中使⽤⾃定义组件

<view>
	<!-- 以下是对一个自定义组件的引用 -->
	<header inner-text="Some text">
	<view>用来替代slot的</view>
	</header>
</view>

11.4. 其他属性

11.5. 定义段与⽰例⽅法

Component 构造器可⽤于定义组件，调⽤等。

Component 构造器时可以指定组件的属性、数据、⽅法

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

11.6. 组件-⾃定义组件传参

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

11.6.1. 过程

1. ⽗组件 把数据 {{tabs}} 传递到 ⼦组件的 tabItems 属性中

2. ⽗组件 监听 onMyTab 事件

3. ⼦组件 触发 bindmytap 中的 mytap 事件

   1. ⾃定义组件触发事件时，需要使⽤ triggerEvent ⽅法，指定 事件名 、 detail 对象

4. ⽗ -> ⼦ 动态传值 this.selectComponent("#tabs");

⽗组件代码:

// page.wxml

<tabs tabItems="{{tabs}}" bindmytap="onMyTab">
  内容-这里可以放插槽
</tabs>

// page.js 
data: {
	tabs:[
		{name:"体验问题"}, {name:"商品、商家投诉"}
	]
}, 
onMyTab(e){
	console.log(e.detail);
 },

子组件代码:

// com.wxml
<view class="tabs">
  <view class="tab_title">
    <block wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>
  </view>
  <view class="tab_content">
    <slot></slot>
  </view>
</view>

// com.js Component({
properties: {
    tabItems: {
      type: Array,
      value: []
    }
  },
  /**
   * 组件的初始数据*/
  data: {},

  /**
   * 组件的方法列表*/
  methods: {
    handleItemActive(e) {
      this.triggerEvent('mytap', 'haha');
    }
  }
})

11.7. ⼩结

1. 标签名 是 中划线的⽅式

2. 属性的⽅式 也是要中划线的⽅式

3. 其他情况可以使⽤驼峰命名

   1. 组件的⽂件名如 myHeader.js 的等

   2. 组件内的要接收的属性名 如 innerText

12. ⼩程序⽣命周期

分为应⽤⽣命周期和⻚⾯⽣命周期

关于小程序前后台的定义和小程序的运行机制，请参考运行机制章节。

12.1. 应⽤⽣命周期

属性	类型	默认值	必填	说明
onLaunch	function		否	监听⼩程序初始化。
onShow	function		否	监听⼩程序启动或切前台。
onHide	function		否	监听⼩程序切后台。
onError	function		否	错误监听函数。
onPageNotFound	function		否	⻚⾯不存在监听函数。

12.2. ⻚⾯⽣命周期

属性	类型	说明
data	Object	⻚⾯的初始数据
onLoad	function	⽣命周期回调—监听⻚⾯加载
onShow	function	⽣命周期回调—监听⻚⾯显⽰
onReady	function	⽣命周期回调—监听⻚⾯初次渲染完成
onHide	function	⽣命周期回调—监听⻚⾯隐藏
onUnload	function	⽣命周期回调—监听⻚⾯卸载
onPullDownRefresh	function	监听⽤⼾下拉动作
onReachBottom	function	⻚⾯上拉触底事件的处理函数
onShareAppMessage	function	⽤⼾点击右上⻆转发
onPageScroll	function	⻚⾯滚动触发事件的处理函数
onResize	function	⻚⾯尺⼨改变时触发，详⻅ 响应显⽰区域变化
onTabItemTap	function	当前是 tab ⻚时，点击 tab 时触发

12.3. ⻚⾯⽣命周期图解

总结:

今天以上讲述了自定义组件的具体用法,子传父,父传子(跟Vue中的子传父,父传子很相似),以及小程序的生命周期,分为两种,应用的生命周期,页面的生命周期