微信小程序开发.Day04

01.  自定义组件的创建

　　>> 项目根目录创建 components 文件夹，在Components文件夹上右键，创建组件所属文件夹，如：test

　　>> 在test文件夹上，右键，点击：“新建 Component”

　　>> 键入组件名称，会自动在 test 文件夹下生成 4 个文件；后缀分别为：  .js, .json, .wxml, .wxss

　　

 

 02. 组件的局部引用

　　>> 在页面.json 文件中，引入组件

　　　　

 

 　　>> 在 页面.wxml 中使用组件

　　　　

 

 03. 组件的全局引用

　　>> 在 app.json 文件中，引入组件，

　　>> 在 配置文件中, pages 同级，建立  usingComponents, 用法与 局部引用 一致，只是放到了 app.json 中

04. 组件与页面的区别

　　

 

 05. 组件样式隔离

　　>> 组件内部的样式，不会影响到其它组件的样式，也不会影响页面的样式；

　　>> 小程序页面的样式，也不会影响组件的样式；

　　>> app.wxss 中的全局样式对组件无效；

　　>> 只有 class 选择器会有样式隔离的效果； id选择器，属性选择器，标签选择器不受样式隔离的影响；

　　>> 组件样式隔离选项的配置

　　

　　

 

  

 06. 小程序组件中，事件处理函数 和 自定义方法 需要定义到 methods 节点中，如下：

　　

 

 07. 自定义组件中属性的定义及使用

　　

 

 08. data 和 properties 的区别

　　

 

 　　>>>   this.data === this.properties   二者是完全相等的，

09. 数据监听器

　　

 

 　　>> 对象属性的监听

　　　 

 

 　　>> 若需要监听的属性很多，可以使用通配符进行监听

　　　

 

 10. 纯数据字段

　　　

 

 　  　

 

　　 >> 选中要修改的内容， Ctrl + D 可以快速选择 页面中所有与 之前选中内容相同的 信息；

 11. 组件的生命周期

　　

 

 　　>> 组件生命周期中的三个重要函数的特点

　　　

 

 　　>> 生命周期函数的定义

　　　　

 

 　　>> 组件被应用于页面后，可依据页面的相关生命周期函数实现一些功能，组件可监听的页面的生命周期函数如下：

　　　　

 

12. 自定义组件的插槽的理解与使用

　　

 

 　　>> 单个插槽

　　　　

 

 　　>> 多个插槽的启用

　　　　

 

 　　　　

 

 　　　　

 

 13. 父子组件之间通信的三种方法

　　

 

 　　>> 父传子:属性绑定

　　　　--> 父组件中的定义 及使用

　　　　　　

 

 　　　　--> 子组件中定义 properties 接收父组件的传入内容

　　　　　　

 

 　　>>  子传父：事件绑定

　　　　--> 流程

　　　　　　

 

 　　　　　　

 

　　　　　　上图中的自定义函数名称，自行配置，无特殊要求；

  　　　　　　

 

　　　　　　>> 父组件中，处理子组件传过来的数据

 

 　　　　　　

 

 　　>> 在父组件中获取子组件实例对象后，对子组件进行操作

　　　　　　

 

 14. behaviors : 实现组件间代码共享的特性，类似于 vue.js 中的 mixins

　　

　　》》》 有点像  继承 的概念;

　　》》》 用起来，又像在对象中，实例化了 behavior 对象，再来调用 behavior 的相关内容

　　

 

 　　>>  behavior 的使用

　　　　

 

 　　　　

 

 　　>> 在组件中，导入 behavior 及挂载

　　　　

 

 　　>> behavior 中的可用节点

　　　　

 

 　　>> 组件和组件引用的behavior 中可以包含同名的字段，重名的处理方法

　　　　** 官网： https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html