最近在学习开发商城微信小程序，在开发商城的时候，我们可能在首页，商品列表页都会遇到商品项的展示，类似京东这种，但没这么复杂：

    我将上面的这种商品展示暂且称之为竖向展示。我写过首页和商品列表页之后，发现还有其他页面会用到这种商品展示方式，于是就想将这个鬼东西写成组件，方便使用，顺便也学习一下组件的开发过程。

    首先创建一个空模版的小程序，新建一个文件夹叫做component，它长这个样子：

下面来写组件：

组件跟写小程序单页面一样，也是一个文件夹内部包含同名但后缀不同的文件，就不说明了，需要的请看微信文档，讲的很详细，传送门：https://developers.weixin.qq.com/miniprogram/dev/index.html?t=2018413

先在component/vertical-item/index.json里面注册组件，添加如下代码，表示注册组件：

      在component/vertical-item/index.wxml文件当中添加wxml代码：

     在component/vertical-item/index.wxss文件当中添加样式代码：

.d-shoping-item {
    width: 350rpx;
    font-size: 0rpx;
    display: inline-block;
    border-radius: 6rpx;
}

.info{
    background: #ffffff;
    font-size: 24rpx;
    padding: 10rpx;
    color: #666666;
}
.desc{
    text-align: left;
    height: 68rpx;
    letter-spacing: 4rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow:ellipsis;
}

.detail{
    height: 40rpx;
    padding-top: 10rpx;
    position: relative;
}

.price{
    color: #ff423c;
    display: inline-block;
    position: absolute;
    left: 0;
}

.sale{
    display: inline-block;
    position: absolute;
    right: 10rpx;
}

.d-shoping-image{
    border-radius: 6rpx;
    width: 100%;
    height: 350rpx;
}

    最后在component/vertical-item/index.js添加js代码，每个字段的意思都有解释哟：

Component({
    externalClasses: ['d-class'],
    
    properties: {
        // 商品的图片
        thumb: {
            type: String,
            value: ''
        },
        // 商品的标题(名称)
        title: {
            type: String,
            value: ''
        },
        // 商品的价格
        price: {
            type: String,
            value: ''
        },
        // 商品的销量
        sale: {
            type: String,
            value: ''
        }
    },
    // 注册事件,我们可以绑定跳转事件
    methods: {
        handleTap () {
            this.triggerEvent('click');
        }
    }
});

    现在我们的组件就写好啦，在logs文件夹下面引用我们的组件测试看看效果，先修改app.json把logs文件当作首页面加载，免了跳转的麻烦:

{
  "pages":[
    "pages/logs/logs",
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

    然后再logs.json里面引用我们刚才写好的组件：

{
    "usingComponents": {
        "d-card": "/component/vertical-item/index"
    }
}

    最后在logs.wxml调用我们的组件（图片是借鉴的）：

<view class="test">
    <view class="item">
        <d-card
                title="12018夏季女装碎花外穿雪纺衫吊带衫大妈无袖印花小背心说几句话收到货大幅度发"
                price="69.9"
                sale="销量 80"
                thumb="http://img.weiye.me/zcimgdir/album/file_58fdb771ec8e8.png"
                bind:click="handleClick"
        >
        </d-card>
    </view>
    <view class="item">
        <d-card
                title="12018夏季女装碎花外穿雪纺衫吊带衫大妈无袖印花小背心说几句话收到德大幅度发"
                price="69.9"
                sale="销量 3w"
                thumb="http://img.weiye.me/zcimgdir/album/file_58fdb771ec8e8.png"
                bind:click="handleClick"
        >
        </d-card>
    </view>
    <view class="item">
        <d-card
                title="12018夏季女装碎花外穿雪纺衫吊带衫大妈无袖印花小背心说几句坚阿萨德大幅度发"
                price="69.9"
                sale="销量 60"
                thumb="http://img.weiye.me/zcimgdir/album/file_58fdb771ec8e8.png"
                bind:click="handleClick"
        >
        </d-card>
    </view>
</view>

    写一下logs.wxss容器的样式，便于我们查看：

.test{
    width: 750rpx;
    background: #dfdfdf;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}

.item{
    margin-top: 20rpx;
    margin-left: 16.6rpx;
}

    到此我们可以从开发者工具看到效果啦，如果你还没下载工具，请从上面的传送门进去吧。

    欢迎关注本喵女的个人微信公众号，微信商城小城学习系列会逐一发出，共同学习。

    今天就这么多了,晚安......