标签: 小程序 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是自定义名称事件，父组件中使用
}
}
})
参考文档
往期精彩回顾
- Ant Design 组件 —— Form表单（一)
- Ant Design 组件 —— Form表单（二)
- CMS管理后台入门指南 (Ant Design Pro v2.0)
- 实现点击下载文件的几种方法
- 在https中引入http资源所导致的问题
广州芦苇科技web前端
