如何使用小程序自定义组件功能

作者: 广州芦苇科技web前端 | 来源:发表于2018-12-14 23:39 被阅读0次

微信小程序（三）
wx小程序三
VX小程序三
mpvue框架
小程序入门4——构建自定义组件
如何使用小程序自定义组件功能
微信原生组件｜基于小程序实现音视频通话
微信小程序-自定义组件
小程序的自定义组件
微信小程序自定义组件传值问题

标签: 小程序 component

需求

小程序开发时通过自定义组件将频繁使用的模块抽取出来，简化代码;

实现订单页面的一个小组件模块

实现难点

小程序文档相关的说明太过于详细，以至于不能快速上手使用，因此这里从顽意小程序中拿出一个例子来说明如何使用小程序的自定义组件功能

知识准备

组件与页面一样由四个文件组成，组件与页面写法相同，组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上，组件提供slot节点承载引用组件时提供的子节点；

代码实现

自定义组件

使用组件前需要在组件的json文件中声明，component字段设置为true

{
  "component": true,
  "usingComponents": {}
}

2.wxml中编写组件模板，wxss加入样式

<wxs module="filters" src="../../utils/numberic.wxs"/>
<view class="orderCard" >
  <view class='commodity flex-box ai-s'>
    <image class='commodityImg' src="{{item.image}}"></image>
    <view class='content flex-1'>
      <view class='commodityName'>{{item.name}}</view>
      <view class='commoditySpecification'>{{item.standardName}}</view>
      <view class='commoditySpecification'>{{item.standardName}}</view>
    </view>
    <view class='price'>¥ {{ item.price }}</view>
  </view>
  <view class='money flex-box jc-e' wx:if="{{showTotalPrice}}">
    <view class='amount'>共{{item.num}}件商品</view>
    <view class='allPay'>
      实付:
    <text class='allPayMoney'>¥ {{ price }}</text>
    </view>
  </view>
  <view class='btnBox flex-box jc-e ai-ce' wx:if="{{showBtn}}">
    <view class='btn seeMove' wx:if="{{type === 'DELIVER' || type === 'RECEIVE'}}">查看物流</view>
    <view 
        class='btn return' 
        wx:if="{{type === 'CREATE'}}" 
        style="color:'#ff3366'" 
        data-id="{{orderid}}" 
        catchtap="cancleOrder"
       > 
        取消订单
    </view> 
  </view>
</view>

页面引用组件

1.在页面的json文件中配置引入的组件

{
  "usingComponents": {
    "orderCard": "../../base/orderCard/orderCard"
  }
}

2.页面中使用自定义组件

<view class='orderCardBox' wx:for="{{totalData}}" wx:key="{{item.orderId}}" >
    <orderCard 
      bindtap="switchToOrderDetail" 
      item="{{item.shoppingCartPageWebVO}}" 
      type="{{item.orderType}}" 
      orderid="{{item.orderId}}" 
      data-orderid="{{item.orderId}}" 
      price="{{item.price}}"
      bind:cancleOrder="refreshPage"
    >
    </orderCard>
</view>

父组件与子组件的通信

1.父组件通过属性将数据传到子组件中，需要通过Component构造器的properties字段定义，才能完成属性名到属性的映射；
2.子组件通过事件传递数据到父组件：
- this.triggerEvent(' ',{},{}),第一个参数是自定义事件名称，这个名称是在页面调用组件时bind的名称，第二个对象传递需要的数据，第三个参数事件选项包括事件冒泡、捕获等设置；

Component({
    options: {
        addGlobalClass: true, //使用全局的css样式
    },
    /**
     * 组件的属性列表
     */
    properties: {
        item: {
            type: Object,
            value: true,
        },
        type: {
            type: String,
            value: true,
        },
        orderid: {
            type: String,
        },
        price: {
            type: Number,
            value: 0,
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        showBtn: true,
        showTotalPrice: true
    },

    /**
     * 组件的方法列表
     */
    methods: {
        cancleOrder: function (e) {
            var myEventDetail = {
                val: 'cancle'
              } ;
             this.triggerEvent('cancleOrder', myEventDetail) 
             //cancleOrder是自定义名称事件，父组件中使用
               }
        }
    })