微信小程序自定义组件
微信小程序支持了组件式开发,学习中的心得与记录。
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:"首页弹窗文字"
},
成功传递数据到组件中使用。