微信小程序之自定义组件

简单记录如何实现自定义组件。

一、在文件目录创建一个文件夹，如goodList

二、goodList.json 中做自定义组件声明等（json文件中不应出现注释）

{
  "component": true 
}

三、在goodList.wxml内容如下：

<view class="shop-section">
    <p>{{tittle}}</p>
    <view class="content">
        <view class="skip" wx:for="{{skipArr}}" bindtap="jump">
            <image src="{{item.imgSrc}}"></image>
            <p>{{item.tittle}}</p>
            <p>{{item.price}}</p>
        </view>
    </view>
</view>

四、goodList.wxss 页面样式

.shop-section{
    height: 100%;
    padding: 20rpx;
    background-color: #fff;
    text-align: center;
}
.shop-section>p{
    display: block;
    margin-bottom: 15rpx;
    font-size: 28rpx;
}
.shop-section>.content{
    display: flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.shop-section>.content>.skip{
    width: 44%;
    height: 400rpx;
    display:flex;
    flex-direction:column;
    text-align:left;
    border:1px solid #000;
    padding:15rpx;
    margin-bottom: 20rpx;
}
.shop-section>.content>.skip>image{
    width: 100%;
    height: 296rpx;
}
.shop-section>.content>.skip>p{
    font-size: 26rpx;
}

五、goodList.js (Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。更多使用方法查看官方文档)

Component({
    properties: {  //组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
        tittle: {
            type: String,
            value:''
        },
        skipArr: {
            type: Array,
            value: []
        }

    },
    data: {
        // 这里是一些组件内部数据
        text: "text",
    },
    methods: {
        // 这里放置自定义方法
        jump: function () {
            console.log(111)
        }
    }
})

六、注意前面组件已经搭好，接下来是如何应用自定义组件，如下应用到demo_shop.wxml页面上

    首先，在demo_shop.json中引入组件：

{
  "usingComponents": {
    "goodlist": "../goodList/goodList"
  }
}

goodlist 相当于这个组件名

  然后，在demo_shop.wxml中使用此组件：

<goodlist tittle="发布新品" skip-arr="{{skipArr}}"></goodlist>

七、demo_shop.js 记得在data中绑定数据，如下

skipArr:[
    {imgSrc:'../path/imgs/food01.png',tittle:'糖友欣特膳主食代餐营养饼干',price:'￥398'},
    {imgSrc:'../path/imgs/food02.jpg',tittle:'糖友欣特膳主食代餐营养饼干',price:'￥598'},
    {imgSrc:'../path/imgs/mask01.jpg',tittle:'糖友欣特膳主食代餐营养饼干',price:'￥698'},
    {imgSrc:'../path/imgs/mask02.jpg',tittle:'糖友欣特膳主食代餐营养饼干',price:'￥898'},
]

最后，大功告成！