微信小程序组件化开发

什么是组件化开发

微信小程序的组件和Vue的组件非常相似。

在微信小程序中有很多内置组件，比如button view input image等，有时候我们要自定义组件。和Vue的组件似的。

如何创建自定义组件：
新建一个components目录，在里边创建自定义组件

组件的组成：

• json
• js
• wxml
• wxss

使用组件：

• 在页面的.json中，usingComponents里写入该组件，声明一下。
• 在页面.wxml中使用，和内置组件一样。和Vue很相似

一个简单的示例：
创建comp，代表页面；创建components/xxxx，代表组件。

创建组件：

f-test.wxml
<view class="content">这里是内容</view>
<f-son />

f-test.json
{
  "component": true,    // 必须写了这句话，才代表这是一个组件
  "usingComponents": {  // 自定义组件中也可以引入其他组件
    "f-son": "/components/f-son/f-son"
  }
}

使用组件：

comp.json: 引入组件
{
  "usingComponents": {
    "f-test": "/components/f-test/f-test"
  }
}

comp.wxml： 使用组件
<f-test />

注意：json文件中不能写注释啥的。这里的注释是为了解释清楚，在开发中不能写注释。

注意事项

组件的注意事项：

• wxml中，标签名只支持小写字母，中划线和下划线（一般只用中划线，和官方保持一致）。可以用数字。
• 自定义组件内部也可以去引用其他的自定义组件。
• 给自定义组件起名字的时候，不要以wx-开头，会报错。
• json文件中不可以有注释。
• 当很多页面都想要引入一个自定义组件的时候，就把它注册在全局的app.json中，这样所有的页面和自定义组件中都可以用这个组件了。但是不推荐这种做法。

组件的样式细节：

• 自定义组件的样式不会影响页面，页面的样式也不会对自定义组件造成影响。他们之间不会相互影响。前提是：使用class，会有隔离。
• 组件中不允许使用id或者标签或者属性选择器。会包一个警告。

如何控制页面和组件的样式相互影响：

• 在组件的js文件中有个options属性，设置即可。

test.js：
options: {
    styleIsolation: "shared",     
}
取值：shared（相互作用），apply-shared（页面作用到组件，组件不作用到页面）， isolate（相互隔离，默认）

组件和页面相互通信

组件和页面相互通信

• 页面-》组件，数据，properties
• 页面-》组件，样式，externalClasses
• 页面-》组件，标签，slot
• 组件-》页面，自定义事件，比如组件被点击了一下。this.triggerEvent

this.triggerEvent(事件名，参数对象，{})，最后是options，额外的一些选项

页面向组件传递数据和样式

// components/f-prop/f-prop.js
Component({
  // 传递数据
  properties: {
    title: {
      type: String,     // 类型
      value: "默认标题",  // 默认值
      observer: function(newVal, oldVal){ // 观察者
        console.log(newVal, oldVal);
      }
    }
  },
  // 传递样式
  externalClasses: ["contentclass"],
})

<!--components/f-prop/f-prop.wxml-->
<view class="title">{{ title }}</view>
<view class="content contentclass">这是内容</view>


使用：
<!--pages/comp/comp.wxml-->
<f-prop title="title1" contentclass="red" />
<f-prop title="title2" contentclass="green" />
<f-prop title="title3" contentclass="blue" />

/* pages/comp/comp.wxss */
.red{
  color: red;
}
.green{
  color: green;
}
.blue{
  color: blue;
}

slot插槽

预留一个设备，以有利于对以后进行扩展。
好处：

• 组件的插槽让我们封装的组件更加具备扩展性
• 让使用者决定组件内部的一些内容到底展示什么

例子：
在移动端，导航栏，nav-bar，分为左中右三部分。不把这三部分的内容写死。就用插槽，为了封装性更好。

单个插槽的使用

单个插槽的使用很简单：

<!--components/f-slot-single/f-slot-single.wxml-->
<view>这是单个插槽的头部</view>
<slot />
<view>这是单个插槽的尾部</view>


<!--pages/comp/comp.wxml-->
<f-slot-single>
  <button>这是单个插槽的button</button>
</f-slot-single>

<f-slot-single>
  <text>这是单个插槽的文本内容</text>
</f-slot-single>

多个插槽的使用

多个插槽的使用稍微复杂，要设置几个东西：

<!--components/f-slot-multiple/f-slot-multiple.wxml-->
<view>这是多插槽的头部</view>
<slot name="left" />
<slot name="center" />
<slot name="right" />
<view>这是多插槽的尾部</view>

// components/f-slot-multiple/f-slot-multiple.js
Component({
  options: {
    multipleSlots: true,   // 多个插槽要开启这个
  },
});


<!--pages/comp/comp.wxml-->
<f-slot-multiple>
  <button slot="left">这是多插槽的左边</button>
  <button slot="center">这是多插槽的中间</button>
  <button slot="right">这是多插槽的右边</button>
</f-slot-multiple>

component构造器

传递哪些东西	作用	示例
options	定义组件的配置选项	multipleSlots: true / styleIsolation: shared
data	定义组件内部的初始化数据
methods	定义组件的内部函数
properties	让组件使用者可以给组件传递数据
externalClasses	外界给组件传递额外的样式	数组
observers	可以监听属性的改变

component构造器中可以写哪些东西，如下

// components/f-slot-multiple/f-slot-multiple.js
Component({
  // 1. 额外的配置
  options: {
    multipleSlots: true,   // 多个插槽要开启这个
    styleIsolation: "shared", // 页面和组件的样式共享方式
  },
  // 2. 页面给组件传递数据
  properties: {
    title: {
      type: String,
      value: "",
      oberver: function(newVal, oldVal){}
    }
  },
  // 3. 组件内部的数据
  data: {
    message: ""
  },
  // 4. 组件内部方法
  methods: {

  },
  // 5. 页面向组件传递样式
  externalClasses: ["contentclass"],
  // 6. 监听properties和data的变化
  observers: {
    title: function(newVal){  // 没有oldVal
    },
    message: function (newVal) { }
  },
  // 7. 组件的生命周期
  // 7.1 监听所在页面的生命周期
  pageLifetimes: {
    show(){
      console.log("监听组件所在的页面显示时");
    },
    hide(){
      console.log("监听组件所在页面隐藏时");
    },
    resize(){
      console.log("监听组件所在页面的页面尺寸发生变化时");
    }
  },
  // 7.2 监听组件本身的生命周期
  lifetimes: {
    created(){
      console.log("组件被创建出来");
    },
    attached(){
      console.log("组件被添加到页面/其他组件");
    },
    ready(){
      console.log("组件被渲染出来时");
    },
    move(){
      console.log("组件从一个地方移到另一个地方");
    },
    detached(){ // 可以wx:if来验证。
      console.log("组件被移除掉");
    }
  }
})