小程序《旧岛》项目笔记（8）-项目预览、事件传递、behaviors

ゝ一世哀愁。 2021-09-16 06:20 313阅读 0赞

## 项目预览与事件传递 ##

### 项目预览 ###

小程序项目可以通过扫描二维码来进行预览，对于普通的项目该方法可行。但是对于，其中网络请求的API接口是http开头的的项目。我们需要打开 “不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书” 这一选项，并且预览的时候要打开**手机端的调试**。

### 事件传递 ###

组件包含关系：Compontent3  >  Compontent2  >  Compontent1

事件传递过程：Compontent1 通过自定义事件的触发，监听，捕获等，传递给 Compontent2 ，以此类推。

### behaviors  ###

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的“mixins”或“traits”。

每个 behavior 可以包含一组属性、数据、生命周期函数和方法，组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior 。 behavior 也可以引用其他 behavior 。

behavior 需要使用 Behavior() 构造器定义。

let classicBehavior = Behavior({
      properties: {
        img: {
          type: String
        },
        content: {
          type: String
        }
      },
      data: {
    
      }
    
    })
    export { classicBehavior }

在使用behaviors的时候，我们首先引入声明的 behavior ，然后，在组件中声明 behaviors 即可。

// components/classic/movie/movie.js
    import {
      classicBehavior
    } from '../classic-behavior.js';
    Component({
      /**
       * 组件的属性列表
       */
      behaviors: [classicBehavior],
      properties: {
        // 注意：上面的behaviors可以取代下面的代码，behaviors中包含了essay、music、movie组件中的相同的对外开放的属性。我们抽离成behavior即可。如果它们分别其他不同的对外开放的属性，我们还可以继续声明在properties中。
        //     type: String
        // },
        // content: {
        //     type: String
        // }
      },
    
      /**
       * 组件的初始数据
       */
      data: {
    
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
    
      }
    })

备注：如果 behaviors 中的 behavior 有多个（多继承），比如beh1、beh2、beh3、beh4，且其中均声明了 img 这个属性，那么最后起作用的是beh4；另外，如果 properties 中声明了 img 属性，那么最后起作用的是 properties。但是，对于声明周期函数而言，不存在覆盖情况，会先后执行 behaviors 中的生命周期函数，而后执行子组件中的生命周期函数。