258资源分享网

从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。查看自己使用的小程序基础库版本，可以通过在开发者工具右侧点击详情查看：

最基本的组件

小程序的组件，其实就是一个目录，该目录需要包含4个文件：

xxx.json

xxx.wxml

xxx.wxss

xxx.js

声明一个组件

首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）

{   "component": true }

其次，在要引入组件的页面的json文件内，进行引用声明

{   "usingComponents": {     //自定义的组件名称     ： 组件路径，注意是相对路径，不能是绝对路径       "component-tag-name": "path/to/the/custom/component"   } }

这样，在主页面就可以使用了。

相比于vue的组件引入，小程序的方案更简洁。vue组件引入是需要 import 之后，同时在 components 里面注册，而小程序的组件只需要在 .json 里面注册，就可以在 wxml 里面使用。

使用slot

和vue 相同，小程序也有slot概念。

单一slot

在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

// 主页面内，<addlike>是组件 <addlike item="item" my_properties="sssss">     <text>我是被slot插入的文本</text> </addlike>   // addlike 组件 <view class="container">     <view>hello, 这里是组件</view>     <view>hello, {{my_properties}}</view>     <slot></slot> </view>   // 渲染后 <view class="container">     <view>hello, 这里是组件</view>     <view>hello, {{my_properties}}</view>     <text>我是被slot插入的文本</text> </view> 多个slot

如果需要在组件内使用多个slot， 需要在组件js中声明启用：

Component({   options: {     multipleSlots: true // 在组件定义时的选项中启用多slot支持   },   properties: { /* ... */ },   methods: { /* ... */ } })

使用：

// 主页面 <addlike item="item" my_properties="sssss">     // 在普通的元素上加入 slot 属性，指定slotname, 就可以变成子元素的slot了     <text slot="slot1">我是被slot1插入的文本</text>     <text slot="slot2">我是被slot2插入的文本</text> </addlike>   // 子页面 <view class="container">     <view>hello, 这里是组件</view>     <view>hello, {{my_properties}}</view>     <slot name="slot1"></slot>     <slot name="slot2"></slot> </view> Component构造器

刚才我们说了，一个组件内应该包括js,  wxml, wxss, json 四个文件。wxml 相当于是 HTML，wxss 相当于是 css, 那么js 里面应该写什么呢？

微信官方提供的案例中：

Component({     behaviors: [],     properties: {       },   data: {}, // 私有数据，可用于模版渲染     // 生命周期函数，可以为函数，或一个在methods段中定义的方法名   attached: function(){},   moved: function(){},   detached: function(){},     methods: {     onMyButtonTap: function(){           },     _myPrivateMethod: function(){           },     _propertyChange: function(newVal, oldVal) {       }   } })

里面调用了一个Component构造器。Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。具体 Component里面可以放什么东西，如下所示：

组件与数据通信