微信小程式wepy自定義card控件封裝

微信小程式wepy自定義card控件

在利用wepy開發小程式的過程中，需要使用自定義控件來實作，但是很多時候，若直接在page頁面中寫對應的控件，下次在另一個頁面中，想使用同樣的控件又需要重新綁定資料，重新适合樣式，給開發帶了不便，由此，原生微信小程式以及wepy架構都提供了封裝控件的功能，使得代碼的複用性大大提高。

在實驗項目的開發過程中，需要使用card類型的控件，作為一個卡片，顯示對應的資訊，并且要求需要圖檔。以下便是封裝一些開發的經曆和感受。

wepy控件介紹

• 建立自定義元件

與原生小程式建立元件得方法大緻一緻，支援子產品化，并且彼此互相獨立，但相關得業務代碼以及互動事件仍然需要在頁面中得到實作。在wepy中，其srcipt部分其頁面設定為繼承wepy.component。WePY中實作了小程式的元件化開發，元件的所有業務與功能在元件本身實作，元件與元件之間彼此隔離。

在實作中依然按照wepy得結構進行程式設計，在wepy.component中存在如下屬性

屬性	說明
customData	自定義資料
customFunction	自定義方法
onLoad	生命周期函數，隻在加載頁面時顯示，頁面到背景再次打開不響應
onShow	生命周期函數，頁面在前台加載時調用
data	頁面所需資料均需在這裡聲明，可用于模闆資料綁定
computed	聲明計算屬性
watch	聲明資料watcher
methods	聲明頁面wxml中标簽的事件處理函數。注意，此處隻用于聲明頁面wxml中标簽的bind、catch事件，自定義方法需以自定義方法的方式聲明
prop	與父元件互動的資料定義

wepy封裝card

• UI工程師的設想

參考各個微信小程式控件，如iview weapp,wux-weapp等，UI工程師決定，我們項目的card需要

1. 有好看并且醒目的标題
2. 需要有tag
3. 需要有好看的圖檔
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 >
    .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部分需依據項目的具體資料進行程式設計