标签: 小程序 component

需求

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

实现难点

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

知识准备

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

代码实现

自定义组件

1. 使用组件前需要在组件的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是自定义名称事件，父组件中使用}}})复制代码

参考文档

1.更加详细深入的介绍可以参考小程序开发文档；

往期精彩回顾

• Ant Design 组件 —— Form表单（一)
• Ant Design 组件 —— Form表单（二)
• CMS管理后台入门指南 (Ant Design Pro v2.0)
• 实现点击下载文件的几种方法
• 在https中引入http资源所导致的问题

• 作者简介：黄杰，芦苇科技web前端开发工程师 专注于前端领域框架、交互设计、图像绘制、数据分析等研究，访问 www.talkmoney.cn 了解更多。