微信小程序如何自定义组件

自定义小程序组件

<mybutton value="设置按钮上的文本"
		 color="控制按钮的颜色"
		 round  控制是否是胶囊按钮
         bind:doubletap = "doubleTapEvent" 双击监听事件
></mybutton>

自定义组件的基础步骤

1.新建组件四件套

components/mybutton/mybutton.js
components/mybutton/mybutton.json
components/mybutton/mubutton.wxml
components/mubutton/mubutton.wxss

2.在wxml、wxss中编写组件的默认结构即样式。

<view class="button">默认按钮</view>
定义.btn样式即可

3.在page.json中引入该组件，就可以直接使用自定义标签显示组件了

在json中引入组件

{
    "usingComponents":{
        "mybutton":"/components/mybutton/mybutton"
    }
}

在wxml中使用组件：

<mybutton></mybutton>

为组件添加自定义属性

组件.js声明组件属性

Component({
    /** 组件的属性列表*/
    properties:{
        color:{
            type:String,
            value:'#33c'
        },
        value:{//当前组件设计一个属性：value
            type:String, //value属性的类型：String
            value:'默认按钮' //value属性的默认值：默认按钮
        }
    },
})

组件.wxml中使用组件属性，动态设置内容

<view class ="btn"
	style = "background-color:{{color}};">{{value}}</view>

page.wxml中使用组件时，设置属性

<mybutton value = "登录" color="#a33"></mybutton>
<mybutton value = "注册" color="#3a4"></mybutton>