② 小程序组件封装

微信小程序组件封装

类似于页面，一个自定义组件由json wxml wxss js 4个文件组成

定义组件

1.在json文件中做自定义组件声明

{
    "component": true
}

2.在wxml文件中编写组件模板，在wxss文件中加入组件样式

<view class="inner">
  {{innerText}}
</view>

2.1 tip

• 001 组件wxss中的样式只作用于这个自定义组件
• 002 在组件wxss中__不应该__使用id选择器、属性选择器和标签选择器

3.在自定义组件的js文件中，需要使用Component()来注册组件，并提供组件的属性定义、内部数据和自定义方法

Component({
  // 组件的对外属性，是属性名到属性设置的映射表
  properties: {
    innerText: {
      type: String,
      value: '',
      observer(newVal, oldVal, changePath) {}
    },
    myProperty2: String
  },
   data: {},
   methods: {}
})

使用自定义组件

1.在json文件中进行引用声明

{
  "usingComponents": {
    "component-tag-name": "path/component"
  }
}

2.在页面的wxml中就可以像使用基础组件一样使用

<view>
  <component-tag-name inner-text="some text"></component-tag-name>
</view>

注意

1. 因为wxml节点标签名只能是小写字母、中划线和下划线组合，所以自定义组件的标签名也只能包含这些字符。

2. 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用usingComponents字段）。

3. 自定义组件和页面所在项目根目录名不能以"wx-"为前缀，否则会报错。