[移动开发]微信小程序组件的封装

? ? ? ? 项目开发中组件的封装可以减少代码的重复率，简化页面的逻辑与代码的整洁，没人会喜欢一个两、三千行的代码文件，难开发不说，维护起来更加困难，对下个开发者来说，不敢更改之前“复杂的代码”，只会越改越多，第三个开发者就“*，**，***”。然而，如果你封装了一个两千行的组件，那你还不如写一个三千行的文件，二者没有任何区别。组件，何为组件，组件就是给开发者带来遍历的模块，我们可以理解为组件就是一个外部“纯粹”的页面，我们可以在需要的地方引用他，给他传值，他便会返回我们所需要的值，“纯粹的组件”----传事件或者值，返回相对应的值，没有复杂的逻辑，如果你在一个组件中带有非常复杂的逻辑，那么你的组件复用率只会越来越低，变的难以维护。避免前人写代码后人骂的情况发生（虽然都会挨骂，哈哈哈，我都有时候自己骂自己写的什么玩意。）。

一、微信小程序组价（详解）

? ? ? ? 这是一个弹窗组件大家也可以拿去用

? ? ? ? wxml文件

//wxml部分

<view class="mask">
  <view class="success" style="top:{{top}}">
    <view class="success_a">
      <view wx:if="{{people}}">收货人：{{people}}</view>
      <view wx:if="{{phone}}">手机号：{{phone}}</view>
      <view wx:if="{{address}}">地址：{{address}}</view>
      <view wx:if="{{distribution}}" class="give">{{distribution}}</view>
      <view wx:if="{{center}}" class="center">{{center}}</view>
    </view>
    <view class="_button">
      <view bindtap="hideDeliver" style="border-right:1px solid #E5E5E5;">取消</view>
      <view bindtap="goToDelivery" style="color: #5576AA;">确定</view>
    </view>
  </view>
</view>

? ? ? ? js.文件

//js文件
// pages/components/springFrame/springFrame.js
Component({
  /**
   * 组件的属性列表
   */
    //接收参数
  properties: {
    people:{
      type:String,
      value:""
    },
    phone:{
      type:String,
      value:""
    },
    address:{
      type:String,
      value:""
    },
    distribution:{
      type:String,
      value:""
    },
    center:{
      type:String,
      value:""
    },
    top:{
      type:String,
      value:""
    }
  },
  
  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
//触发父组件事件
  methods: {
    hideDeliver(){
      this.triggerEvent("hideDeliver")
    },
    goToDelivery(){
      this.triggerEvent("goToDelivery")
    }
  },
})

? ? ? ? wxss文件

//wxss文件
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  opacity: 1;
  z-index: 2;

}

.success {
  position: fixed;
  /* top: 344rpx; */
  right: 50%;
  transform: translateX(50%);
  
  opacity: 1;
  width: 638rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
}

._button {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-top: 1rpx solid #E5E5E5;
  height: 90rpx;
}

._button view {
  text-align: center;
  width: 50%;
  height: 100%;
  line-height: 90rpx;
}

.success_a {
  padding: 40rpx 55rpx 40rpx 55rpx;
}

.success_a view {
  font-size: 36rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 54rpx;
}

.success_a .give {
  font-weight: 600;
}

.center {
  font-size: 36rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 700;
  color: #333333;
  line-height: 54rpx;
  text-align: center;
}

二、父组件中调用子组件

? ? ? ? JSON文件引入组价

{
  "navigationBarTitleText": "处方订单",
  "usingComponents": {
    "springFrame":"../components/springFrame/springFrame"
  }
}

? ? ? ? wxml文件

//我是一个页面用了两个弹窗所以使用了两次组件
<springFrame wx:if="{{mask}}" top="344rpx" people="{{deliveryname}}" phone="{{deliveryiphone}}" address="{{deliverydizhi}}" distribution="是否前往配送？" bind:hideDeliver="hideDeliver" bind:goToDelivery="goToDelivery"></springFrame>
<springFrame wx:if="{{complete}}" top="434rpx" center="是否已经完成配送？" bind:hideDeliver="hideComplete" bind:goToDelivery="completion"></springFrame>

? ? ? ? js文件主要进行逻辑的处理就不展示了，没啥用

三、总结

? ? ? ? 一些数值的传递显示大家可能觉得很简单，一到方法就卡住了，难免会问：这个组件就两个方法一个取消一个确认，我使用的话，使用了四次对于8个方法，我怎么配置呀？需要在子组件写八个方法去触发父组件的方法么？答案肯定是否定的，我们是需要传递触发8个方法，但是子组件有两个办法就够了可以看下面的代码：

//父组件传递
    //第一次调用组件方法传递
         bind:hideDeliver="hideDeliver" bind:goToDelivery="goToDelivery"
    //第二次调用组件方法传递
         bind:hideDeliver="hideComplete" bind:goToDelivery="completion"
//子组件触发父组件事件
    methods: {
    hideDeliver(){
      this.triggerEvent("hideDeliver")
    },
    goToDelivery(){
      this.triggerEvent("goToDelivery")
    }
  },

? ? ? ? 你会发现我们传递了四个方法过去，但子组件仅需要两个方法就可以解决。

? ? ? ? 子组件：告诉我需要触发那个方法

? ? ? ? 父组件：我这边有四个方法需要你触发

? ? ? ? 子组件：四个？我这边只有两个按钮，取消和确认，这样吧，你把他们分下类，取个名字传给我，我这边只要A和B这两个事件

? ? ? ? 父组件：行吧，行吧，我给他们取个小名，叫A和B你根据小名去找到他们的真名触发吧

? ? ? ? 子组件：行，我这边弄两个独立事件去根据A和B，找他们的真名吧

? ? ? ? 父组件：合作愉快