浅尝components自定义组件

1、创建components目录，在目录下再创建子文件夹放置组件文件（易于区分），组件文件与正常文件一样有js，json，wxml，wxss四种格式。

2、

在wxml里写入正常的代码，把需要的样式写成变量模式，slot部分承载你要显示的文字，绑定一个事件，举一个简单的例子：

 

<view
class='content'
style='width:{{c_width}};height:{{c_height}};background-color:{{bgcolor}};color:{{c_color}};font-size:{{c_size}};line-height:{{c_height}}'
catchtap='tanchuang'>
<slot></slot>
</view>

 

 

在wxss里写入固定的样式，这里的css样式不会与其他地方的css样式污染，css内不要用其他选择器，尽量全部使用类选择器。

在json里声明组件

 

{
"component": true
}

 

 

 

 

在js文件里构建conponents，properties设置属性：变量名称，类型，默认值。data里边是私有变量，只在此文件内使用，ready是页面打开时执行的函数，在模板内设置的变量会直接覆盖value的值，不需要再setData覆盖变量，直接可以改变样式，事件要写在methods中，模板中绑定的tanchuang事件会触发methods中的tanchaung事件继而触发triggerEvent事件，triggerEvent事件中有三个参数，第一个参数：要调用的事件的名称（不能存在数字）；第二个参数：在事件中传递的值；第三个参数：事件选项；在这里我们要求，点击模板触发tanchuang事件，然后传递一个参数给tan事件。

 

Component({
    properties: {
        'c_width': {
            type: String,
            value: "100%"
        },
        'c_height': {
            type: String,
            value: "300rpx"
         },
        'c_color': {
            type: String,
            value: "white"
         },
        'bgcolor': {
            type: String,
            value: "#1296db"
        },
        'c_size': {
            type: String,
            value: "35rpx"
        },
    },
    data: {
        id:1,
    },
    ready: function () {

    },
    methods:{
        tanchuang(e){
            console.log("ok");
            var indexdetial=this.data.id;
            this.triggerEvent("tan",{indexdetial});
        },

    }

})

 

 

 

 

 

 

 

 

到此为止，组件已经写完了，现在就只需要使用了

3、在需要用到的组件页上使用组件

首先在json页面上声明使用组件： 第一个参数是你自定义组件的名称，第二个参数是路径

 

{
    "usingComponents": {
        "kuang":"/components/tmp/index"
    }
}

 

声明完毕后再wxml页面内使用声明过的组件：设置所需的变量，变量会直接改变组件里设置的默认值。

这里bind绑定的事件名要与组件 js 里triggerEvent事件里设置的触发事件名称一致，都为tan，然后设置点击这个事件后触发的另一个事件tan1；

 

<kuang bgcolor="red" c_size="50rpx" c_height="500rpx" c_width="80%" bind:tan="tan1">哈哈 我成功了</kuang>

 

 

效果图：

 

在js文件内写入tan1要触发的事件

 

tan1(e){
    console.log("触发事件");
    console.log(e);
    wx.showModal({
        content: '第一个模板',
        showCancel: false,
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击确定')
            }
        }
    });
},

 

 

然后这时候点击组件的效果图为：

组件事件出发顺序为（以我的代码为例）：tanchuang -> tan -> tan1