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

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

先把样式做出来，wxml：

  
    
      
      
        ***银行
        充值卡
      
      
        **** 0158
      
    
    
      
        面值：
      
    
    
      
        购买日期：
      
    
  

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中直接使用{ {}}代替原来的文字即可。比如：

      
        {
    {bankName}}
        {
    {bankType}}
      

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

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

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