微信小程序笔记2 自定义组件

周大胖子 · 发表于 2020-4-16 09:13:25

1.简单自定义组件
1.1 右击新建个文件夹
1.2 右击新建个component ，然后输入用户名：laomocomponent
1.3 在需要引入的模块（这里姑且就用index 模块举例） index.json 中usingComponents声明抽象节点
"laommycompoents": "/laommycompoents/laommycompoents"
1.4 在laomocomponent.wxml 里写入代码：


<view class="wrapper">
    <view>就是这个位置</view>
    <slot></slot>
</view>
1.5 在index.wxml 中码代码：
   <laommycompoents>
     <view> 测试688</view>
    </laommycompoents>

1.6 到这就结束了，看页面index
是这样显示的：
就是这个位置
测试688
所以这个 solt 节点的意义就是： <slot> 节点，用于承载组件引用时提供的子节点。

1.7 了解组件各种功能：
1.7.1 组件可以传值
1.7.2 组件可以多个 slot ；
1.7.3 组件可以有单独的样式；
1.7.4 组件样式隔离：自定义组件的样式只受到自定义组件 wxss 的影响
1.7.5 可以在 Component 中用 externalClasses 定义段定义若干个外部样式类。
1.7.6 即使启用了样式隔离 isolated ，组件仍然可以在局部引用组件所在页面的样式或父组件的样式。
统一参考地址：https://developers.weixin.qq.com ... nent/wxml-wxss.html

2  Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等

3.组件间通信与事件：
基本通信方式有以下几种
3.1 WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据；
3.2 事件：用于子组件向父组件传递数据，可以传递任意数据。
3.3 如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

3.4 总结自定义组件中的通信：

3.4.1 a.wxml 与 a.js index.wxml 与 index.js

3.4.2 在a.wxml 上写上代码 <button bindtap="lmc">点</button> ;（子组件中绑定触发函数）

3.4.3 在a.js 中写函数：必须写在 methods里

   methods: {
onTap: function () {
      var myEventDetail = {} // detail对象，主要就是提供数据
      var myEventOption = {} // 触发事件的选项可以不写
      this.triggerEvent('myevent', myEventDetail, myEventOption)
      }
       }

3.4.4 在 index.wxml 内的标签上写：设计监听事件
   <laommycompoents  bind:laomoevent="laomoeventEventListener">
     <view> 测试688</view>
    </laommycompoents>

3.4.5 在index.js 中接受并且处理函数
   laomoeventEventListener:function(e){
console.log('终于TM的进来了');
console.log(e.detail)
    },

4. 指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。
参考网址：https://developers.weixin.qq.com ... nent/lifetimes.html

5. behaviors 是用于组件间代码共享的特性，组件引用它时，它的属性、数据和方法都会被合并到组件中。

5.1  在a文件夹下新建 lm-behavior.js 文件；
文件内容：
module.exports = Behavior({
    behaviors: [],
    properties: {
   myBehaviorProperty: {
      type: String
   }
    },
    data: {
myBehaviorData: {}
    },
    attached: function () { },
    methods: {
        myBehaviorMethod: function () {
      console.log('我真是个大帅哥');
}
    }
});

5.2  在a.js 中写代码：引入

var myBehavior = require('my-behavior')

Component({
    behaviors: [myBehavior],

})

5.3 在a.wxml 中直接用：
<button bindtap="myBehaviorMethod"> 点 </button>

5.4 坑爹呢不是，居然是这么坑： wx://form-field 代表一个内置 behavior ，这里居然跟我讲内置，忽悠鬼啊

6 通常利用： relations  来解决嵌套组件两者之间的关系；
  参考网址： https://developers.weixin.qq.com ... nent/relations.html

7 数据监听器：observers  就是监听数据改变的
  参考网址：https://developers.weixin.qq.com ... onent/observer.html