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