微信小程序做一个银行卡的组件

微信小程序创建自定义组件，在创建页面的时候选择新建Component，而不是Page，见下图：

先把样式做出来，wxml：

<view class="page">
  <view class="cardMain">
    <view class="clearfix">
      <image class="bankLogo" mode="scaleToFill" src="https://www.网址.jpg"></image>
      <view class="bankInfo">
        <view class="first-child">***银行</view>
        <view class="second-child">充值卡</view>
      </view>
      <view class="bankNum">
        <view>**** 0158</view>
      </view>
    </view>
    <view class="clearfix">
      <view class="first-child">
        面值：
      </view>
    </view>
    <view class="footer">
      <view class="footer-child">
        购买日期：
      </view>
    </view>
  </view>
</view>

wxss：

.page {
  width: 100%;
  height: 100%;
}

.page,
.cardMain {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.cardMain {
  border-radius: 5px;
  padding: 10px;
  width: 90%;
  height: 220px;
  background: linear-gradient(to bottom right, #cd4100, #f8937f);
  color: #fff;
  margin-top: 30px;

}

.clearfix {
  flex-direction: row;
  width: 90%;
  height: 50px;
  margin-top: 30rpx;
}

.bankLogo {
  border-radius: 50%;
  background: #fff;
  text-align: center;
  width: 30px;
  height: 30px;
  float: left;
}

.bankInfo {
  float: left;
  margin-left: 10px;
}

.first-child {
  font-size: 16px;
}

.second-child {
  font-size: 10px;
}

.bankNum {
  float: right;
  margin-top: 10px;
  color: #fff;
}

.footer {
  position: absolute;
  bottom: 5px;
  width: 90%;
  height: 50px;
}

.footer-child {
  float: right;
}

效果如下：

将这些值改为可以接受参数的，js文件中的组建属性列表中添加如下：

  properties: {
    bankName: {
      type: String,
      value: '****银行'
    },
    //卡号
    bankID: {
      type: String,
      value: '**** 0158'
    },
    //卡的类型
    bankType: {
      type: String,
      value: '充值卡'
    },
    //启用日期，为下标
    payTime: {
      type: String,
      value: '购买日期：'
    },
    //金额
    amount: {
      type: String,
      value: '500'
    }
  },

这样在wxml中直接使用{{}}代替原来的文字即可。比如：

      <view class="bankInfo">
        <view class="first-child">{{bankName}}</view>
        <view class="second-child">{{bankType}}</view>
      </view>

在使用的页面里的json中添加组件：

{
  "usingComponents": {
    "bankCard":"../bankCard/bankCard"
  }
}

在wxml中便可直接使用组件，并且可以传递参数：

<bankCard bankName="宇宙银行" amount="无限额"></bankCard>