自定义组件

组件化开发

概念：

在开发中将某一个功能模块对应的网页结构，网页样式，数据渲染及交互进行统一的封装，对外仅仅提供简单的属性获取外界传递的数据，该过程被称为组件化开发。

作用：

• 对代码进行封装，实现代码的高内聚，低耦合。
• 提高代码的可移植性，从而实现代码的复用。
• 有效减少某一个文件的中的代码量，从而增强代码的可读性。
• 低耦合的代码可以有效增强代码的可维护性。

组件开发过程

• 在微信小程序项目中创建components文件夹，存储自定义组件。
• 选中components文件夹中新建空文件夹，之后选择新建的空文件夹，右键新建Component。
  
• 自定义组件也是由四个文件组成。
  

js 文件用来完成对自定义组件数据定义，事件绑定，数据处理等交互类操作。
json 文件用来完成对自定义组件的配置，比如在自定义组件内部配置其他的自定义组件。
wxml 用来定义自定义组件对应的模板结构。
wxss 用来定义自定义组件对应的样式结构。

• 在需要使用自定义组件的页面或者其他组件对应的 JSON 文件中配置该自定义组件。该配置过程等价于 Vue 的局部组件注册过程。
  
• 在需要使用的自定义组件的页面或者组件对应的 wxml 文件中直接引入该组件。
  

自定义组件的通信

父级组件向自己组将传递信息

自定义属性（properties）

• 首先需要在自定义组件的 js 文件中定义自定义属性。
  
• 在自定义组件的 wxml 文件中绑定属性。
  
• 在自定义组件实例化时，通过自定义属性将父级组件中的数据传递给该子级组件。
  

子级组件向父级组件传递信息

自定义事件传值

• 首先在父级组件对应的 wxml 文件中找到自定义组件的实例，为该实例绑定一个自定义事件。微信小程序中事件的绑定通过bind关键词，事件绑定的语法 bind事件名
  
• 在自定义组件内部合适的事件，比如在按钮被点击时，通过triggerEvent 触发该自定义事件，完成数据传递。
  
• 在父级组件回调操作中获取数据，并且根据数据执行操作。
  

自定义组件的生命周期

组件生命周期分类

• created:在组件实例刚刚被创建时执行。
• 执行该生命周期时，可以通过this访问data数据源，但是不能执行数据更改，因为此时组件实例并没有挂载到组件树中，更改数据不会引起页面数据的刷新。
• attached：组件实例进入页面节点树时执行。
• 执行该生命周期时，组件实例已经进入到节点树中，此时可以通过 setData 更改数据实现页面数据的刷新。因此该生命周期中可以进行初始组件加载时的网络请求。
• ready：在组件在视图层布局完成后执行。
• 执行该生命周期时，组件实例已经在视图层布局完成，此时可以用来获取某些组件实例的布局属性，比如组件的宽高，位置等信息。
• moved：在组件实例被移动到节点树另一个位置时执行。
• 执行该生命周期时，组件实例被移动到节点树另一个位置时执行。此时可以在该生命周期中完成状态切换，数据更改均可。
• detached：在组件实例被从页面节点树移除时执行。
• 执行该生命周期时，组件即将被销毁，此时可以在生命周期中完成一些任务的终止操作。
• error：每当组件方法抛出错误时执行
• 使用较多的为：attached，ready，detached

注意：

微信小程序中组件的生命周期可以直接写在组件实例化时对应的属性配置中，但是这种写法是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容。但是微信小程序官方不建议直接这样书写，应该写lifetimes中。

• 旧方式写法
  
• 新方式写法
  
• 微信小程序中自定义组件如果在页面中定义，此时自定义组件也可以直接使用组件所在页面的生命周期。(了解内容)
  

自定义组件的样式

• 在自定义组件中，组件的样式修改时，尽量使用class选择器。其他选择器可能存在性能问题。
  
• 自定义组件有些样式可以实现继承，比如font，color默认是从组件外继承到组件内。
• 自定义组件除了继承样式外，其他样式默认都是隔离权限。即组件内部样式无法影响组件外部的样式，同时组件外部的样式无法影响组件内部的样式。如果想要修改样式权限，可以在JS中添加options属性，设置样式权限。样式隔离优势是可以保证自定义组件样式不会被外部样式污染。
  
  

slot插槽

插槽主要起到一个占位符的作用，在自定义组件中可以通过插槽设置一个位置，该位置可以接收父级组件对应的一段页面结构。从而实现对自定义组件内部内容灵活定制。

使用：

• 首先在自定义组件对应的 wxml 文件中添加slot标签用来设置一个插槽位置。
  
• 在父级组件 wxml 中对应的组件实例位置添加需要嵌入的插槽内容。
  

多个插槽的使用

微信小程序中每一个自定义组件默认slot插槽只能有一个。如果开发中需要使用多个插槽，此时需要在自定义组件的 js 文件中添加options属性，设置当前组件支持多插槽操作。

• 多个插槽为了区分不同的插槽内容需要为每一个slot设置一个name属性。
  
• 父级组件使用时，可以通过为不同内容设置slot属性，实现不同内容插入到不同的位置。
  

课堂案例

阿里字体的导入

• 首先下载对应的字体。

• 解压下载的样式代码，将其中的 iconfont.css 文件修改为iconfont.wxss 文件。

• 将fonts文件夹相关文件放入微信工程中。
  

• 打开 iconfont ，点击复制代码或者下面的链接。
  

• 复制上面所有的 css 代码，打开 iconfont.wxss 文件，之后替换该文件中原来的代码。
  
• 在需要使用字体文件的组件对应 wxss 中导入 iconfont.wxss ，注意在微信小程序如果需要从其他的 wxss 文件中导入样式到当前 wxss 文件，此时需要使用@import。
  

课堂案例

• 删除系统的导航条
  

• 更改导航条的背景色
  

• 构建自定义导航条的代码结构（返回按钮和中间内容）。
  

• 在需要进行导航条定制的页面注册该组件，并且实例化该组件。
  
  在小程序刚刚启动时动态计算导航条的高度。

• 在 app.js 文件中对应小程序生命周期 onLaunch 中计算状态条的高度。

 //获取当前小程序所在收集设备的设备信息，该信息中存有当前屏幕的宽高信息，当前可用窗口的宽高信息，状态条高度等设备信息
    var systemInfo=wx.getSystemInfoSync();
    console.log(systemInfo);

• 在 app.js 文件中对应小程序生命周期 onLaunch 中计算胶囊按钮的位置信息。

// 获取小程序气泡胶囊按钮的位置信息
    var menuRect= wx.getMenuButtonBoundingClientRect();

• 在app.js中分别计算导航条的高度=“状态条高度+胶囊按钮高度+2*胶囊按钮相对于状态条下边界的距离”，胶囊按钮占据的右侧空间的宽度=“胶囊按钮的宽度+胶囊按钮相对于窗口右侧的距离”。

//动态计算导航条的高度:状态条高度+2*（胶囊上面的距离-状态条高度）+胶囊高度
    var height=systemInfo.statusBarHeight+2*(menuRect.top-systemInfo.statusBarHeight)+menuRect.height;
    // 计算胶囊按钮占据右侧空间的宽度=胶囊按钮的宽度+胶囊按钮相对于有边界的距离
    var rightWidth=menuRect.width+(systemInfo.screenWidth-menuRect.right);

• 将计算的信息定义程全局变量，实现在任意页面随意访问。
  
• 需要进行导航条自定义的组件或者需要访问全局数据的页面获取全局变量。
• App 实例：微信小程序开发中可以在任何位置调用 getApp 获取小程序全局唯一的 App 实例。
  
• 获取全局唯一 app 实例。
  
• 在合适的时间将全局变量定义成当前组件特有的数据源。
  
• 在自定义导航条对应的 wxml 文件中绑定数据源。

<!-- style表示占位 -->
<view style="height:{{pos.nav_height}}px;color: {{color}};">
    <!-- 导航条 -->
    <!-- style代表绑定高度 -->
    <view class="nav_bar" style="background-color: {{background}};height:{{pos.nav_height}}px;" >
    <!-- 设置一个view占据状态条区域，放置内容进入到状态条 -->
       <view style="height: {{pos.statusBarHeight}}px;"></view>
       <view class="content " style="height: {{pos.nav_height-pos.statusBarHeight}}px;">
            <!-- 返回按钮 -->
          <view class="back" ><icon class="iconfont icon-shangyiyehoutuifanhui-xianxingyuankuang"></icon></view>
          <!-- 接收外部设置的中间内容 -->
         <view  style="line-height: {{pos.nav_height-pos.statusBarHeight}}px;" > <slot></slot></view>
          <!-- 用来占据当前气泡的位置，设置展位区域，将胶囊按钮位置占据 -->
          <view class="block" style="width:{{pos.right_width}}px ;height: 30px;"></view>
       </view>
    </view>
</view>

• 修改外观样式，实现自定义导航条。