微信小程序wepy自定义card控件

在利用wepy开发小程序的过程中，需要使用自定义控件来实现，但是很多时候，若直接在page页面中写对应的控件，下次在另一个页面中，想使用同样的控件又需要重新绑定数据，重新适合样式，给开发带了不便，由此，原生微信小程序以及wepy框架都提供了封装控件的功能，使得代码的复用性大大提高。

在实验项目的开发过程中，需要使用card类型的控件，作为一个卡片，显示对应的信息，并且要求需要图片。以下便是封装一些开发的经历和感受。

wepy控件介绍

与原生小程序创建组件得方法大致一致，支持模块化，并且彼此互相独立，但相关得业务代码以及交互事件仍然需要在页面中得到实现。在wepy中，其srcipt部分其页面设置为继承ponent。WePY中实现了小程序的组件化开发，组件的所有业务与功能在组件本身实现，组件与组件之间彼此隔离。

在实现中依然按照wepy得结构进行编程，在ponent中存在如下属性

wepy封装card

参考各个微信小程序控件，如iview weapp,wux-weapp等，UI工程师决定，我们项目的card需要

1. 有好看并且醒目的标题2. 需要有tag3. 需要有好看的图片4. card中的描述需要清晰，描述过长需要隐藏5. 底部需要有对应的card信息栏6. card需要有立体感，要好看(无奈)

码农的实现

部分代码

<template><view class="card card-shadow"><view class="card-head"><view class="card-head-title"><view class="card-head-icon"><i class="iconfont icon-style">&#xe650;</i></view><view class="card-head-title-label">{{title}}</view></view><view class="card-head-tag"><view class="tag">{{tag}}</view></view></view><view class="card-body"><view class="card-body-image"><image class="image" src="{{imageUrl}}" mode="scaleToFill"/></view><view class="card-body-desc"><view class="card-body-desc-hd">任务描述</view><view class="card-body-desc-bd">{{description}}</view></view></view><view class="card-foot"><view class="card-foot-reward"><view class="card-foot-reward-label">报酬：</view><view class="card-foot-reward-number">{{reward}}</view><view class="card-foot-reward-icon"><i class="iconfont">&#xe603;</i></view></view><view class="card-foot-button"><button class="card-foot-button-style" size="mini" @tap="navBtn({{taskid}})">{{buttonDes}}</button></view></view></view></template>

以上是wepy文件中的wxml部分

<style lang="less">.card {display: flex;flex-direction: column;height: 150px;width: 90%;margin: 20rpx auto 0;border: 1rpx solid #dddee1;border-radius: 20rpx;}.card-shadow{box-shadow: 10rpx 10rpx 20rpx #999;}.card-head{display: flex;flex-direction: row;justify-content: space-between;align-items: center;font-size: 14px;height: 20%;}.card-head-title{padding-left: 5px;font-size: 14px;display: flex;flex-direction: row;}.card-head-icon{font-size: 14px;}.icon-style{color: #66b1ff;font-size: 10px;}.card-head-title-label{padding-left: 5px;}.card-head-tag{padding-right: 5px;font-size: 14px;}.tag{display: inline-block;height: 18px;line-height: 18px;padding: 0 4px;border-radius: 2px;background: #fff;font-size: 11px;vertical-align: middle;border: 1rpx solid #dddee1;border-radius: 5%;box-shadow: 2px 2px 4px #999;}.card-body{display: flex;flex-direction: row;justify-content: space-between;align-items: center;height: 55%;}.card-body-image{height: 100%;padding-left: 5px;}.image{height: 82.5px;width: 82.5px;}.card-body-desc{display: flex;flex-direction: column;height: 100%;width: 75%;padding-right: 5px;padding-left: 5px;}.card-body-desc-hd{font-size: 16px;}.card-body-desc-bd{font-size: 12px;line-height: 38rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}.card-foot{display: flex;flex-direction: row;justify-content: space-between;align-items: center;height: 25%;}.card-foot-reward{display: flex;flex-direction: row;padding-left: 5px;}.card-foot-button{display: flex;justify-content: center;align-items: center;padding-right: 5px;height: 100%;}.card-foot-button-style {background-color: #66b1ff;color: #fff;}</style>

以上为wxss部分，纯手工打造，可根据自己的喜好添加或删除或修改部分，其中script部分需依据项目的具体数据进行编程