微信小程序自定义组件

微信小程序支持了组件式开发，学习中的心得与记录。

1.组件的使用

自定义组件可以再根目录创建components目录来存放自己编写的组件，再创建新目录保存具体的项目组件，通过小程序的新建Component，来创建组件文件。

               

比如编写一个弹窗组件，

wxml文件

<!--components/fn-alert/alert/alert.wxml-->
<view class="mtCont">
  <view class="alertCont">
    <text class="alertDec">我是弹窗</text>
  </view>
</view>

wxss文件

/* components/fn-alert/alert/alert.wxss */
.mtCont{position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.4);width: 100%;height: 100%;display: flex;align-items: center;justify-content:center;}
.alertCont{background: #fff;width: 320rpx;border-radius: 10rpx;text-align: center}
.alertDec{line-height: 88rpx;font-size: 28rpx;}

关键是要再所需要使用组件的页面中引用该组件，

例如在index页面中引用alert组件，在index.json文件中引用

{
  "usingComponents":{
    "fn-alert":"/components/fn-alert/alert/alert"
  }
}

usingComponents规定使用的组件的引用集合，键名即为引用的组件的dom名称，值为所引用的组件的所在目录，组件名称可以随意命名，注意不要使用官方和html所定义的dom名。

在index.wxml中使用该组件

<!--index.wxml-->
<view class="container">
  <fn-alert />
</view>

如果不需要插值，可以使用自闭合。

2.父页面向子组件传递数据

例如向alert组件传递弹窗文字，在alert.js的properties熟悉中添加自定义的数据及格式

 /**
   * 组件的属性列表
   */
  properties: {
    alertValue:{
      type:String,
      value:'我是默认弹窗'
    }
  },

在alert.wxml中使用自定义的数据

<!--components/fn-alert/alert/alert.wxml-->
<view class="mtCont">
  <view class="alertCont">
    <text class="alertDec">{{alertValue}}</text>
  </view>
</view>

在index.wxml中绑定需要传递的数据

<!--index.wxml-->
<view class="container">
  <fn-alert alertValue="{{indexAlert}}" />
</view>

在index.js中定义要indexAlert数据

data: {
    indexAlert:"首页弹窗文字"
  },

成功传递数据到组件中使用。