WEIXIN day_09(8.26) 学子影院项目实践5

小程序的自定义组件

在设计小程序界面时，极其可能遇到很多相同的UI布局，在不同的页面中使用。小程序建议将这些通用的UI布局、功能封装起来，形成自定义组件，提高代码的重用性、可维护性。

假设希望设计一个自定义组件：my-button，有自定义的外观、自定义的功能。可以在任何小程序页面中引入并且使用。

<my-button title="按钮上的字"
           color="red"
           round="{
    {true}}"
           bind:doubletap="doubleTap">my-button>
doubleTap(){
	console.log('')
}
1
2
3
4
5
6
7
8

自定义组件的步骤

1. 在components文件夹中创建自定义组件的文件夹，新建组件四件套。

2. 编写组件的wxml、wxss默认样式。

3. 在使用组件的页面.json中，配置引入组件。

   {
        
     "usingComponents": {
        
       "my-button":"/components/myButton/index"
     }
   }
   1
   2
   3
   4
   5
   6
   7

4. 在wxml中使用组件。

   <my-button>my-button>
   1

为组件设计自定义属性，提供更丰富的功能（向自定义组件传参）

<my-button title="安全登录">my-button>
1

1. 在组件.js中声明自定义属性，定义属性名、属性类型、属性默认值等信息。

   properties: {
        
       round: {
        
           type: Boolean,
           value: false
       },
   }
   1
   2
   3
   4
   5
   6
   7
   8

2. 在wxml中使用该属性动态设置页面内容。

   <view class="button {
         {round?'round':
   1