微信小程序开发初学：自定义组件component

component创建

1.创建存放自定义组件的文件夹，最好命名为components，在此文件夹中创建一个文件夹，右键新建component，里面包含wxml，wxss，js，json文件
2.在四个文件中编写好自定义组件的框架，样式等

component调用

1.在需要调用component组件的页面的配置文件json中，写入配置项：

"usingComponents":{   
	"组件名1":"组件路径1",
	"组件名2":"组件路径2"
}

例如

/* json文件 */
"usingComponents":{   
	"TopLine":"/components/Topline/Topline",
	"BottomLine":"/components/Bottomline/Bottomline"
	/*组件名可自定义，首字母大写避免与html标签重复*/
}

<!-- 在wxml中调用 -->
<topLine></topLine>
<bottomLine></bottomLine>

component属性传递

例如在自定义组件Title上，需要定义标题内容和跳转页面：

1.在Title.js中写入自定义属性

/*组件的属性列表*/
    properties: {
        myText:{  /*定义标题内容的属性*/
            type:String,                     
            /*属性值类型(String/number/Array/Object/boolean...)*/
            value:"请定义myText，myUrl属性"   /*默认值*/
        },
        myUrl:{   /*定义跳转页面路径的属性*/
            type:String,
            value:""
        }
    },

2.在Title.wxml中添加属性应用位置，如

<view class="title">
      <view >
        <view class="red"></view>
        <view class="text">{{myText}}</view>
      </view>
      <navigator class="more" url="{{myUrl}}">更多 ></navigator>
</view>

3.在调用自定义组件时给自定义属性赋值

<Title myText="精选博客" myUrl="/pages/blogs/blogs"></Title>

使用component可以使pages代码更简洁，相同的区块将其定义成component直接调用即可，适用于多人合作开发！