昨晚学习了一下实现一个简单的自定义组件,虽然官网的文档有四五个小节,但是看不太懂,找了一篇博客写的挺好的:
https://blog.csdn.net/rolan1993/article/details/78801052
这里分享一下大概的步骤,以及官网的一些例子带给项目的启发。
步骤一
在小程序项目中添加一个components
文件夹,里面存放自定义的组件,然后在components
目录下新建一个customComponent
文件夹,文件夹可以命名为自定义组件名字相关,用来存放自定义的组件。
在这个文件夹右键,选择新建组件,输入组件名,一个自定义组件由 json, wxml, wxss, js
4个文件组成,此时将自动生成这四个文件。
比如我要新建一个order-item组件,用来显示购物车每一列的内容,包括菜品名称,菜品数量,菜品共计金额,可以通过循环渲染以及数据绑定用购物车List的item给组件属性赋值。
此时生成的目录结构为:
步骤二
接下来进行组件的相关配置:
首先需要在 json
文件中进行自定义组件声明(将 component
字段设为 true
可这一组文件设为自定义组件):
{
"component": true,
//引用其他组件,这里没有引用其他组件
"usingComponents": {}
}
然后在 wxml
文件中编写组件模版,在 wxss
文件中加入组件样式,它们的写法与页面的写法类似。
注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
<!--components/orderItem/order-item.wxml-->
<view class='orderItem'>
<view class="itemName">{
{name}}
<view class="item-info">
<i class="iconfont icon-minus minus-icon" bindtap="minusFromCart"></i>
<text class="orderNum">{
{number}}</text>
<i class="iconfont icon-add plus-icon" bindtap="addToCart"></i>
<text class="sum">¥ {
{
sum}}</text>
</view>
</view>
</view>
/* components/orderItem/order-item.wxss */
@font-face {
font-family: 'iconfont'; /* project id 657322 */
src: url('//at.alicdn.com/t/font_657322_b9fvdsixaa960f6r.eot');
src: url(