微信小程序的组件开发和普通页面开发没有什么区别，但是组件的目的其实就是对常用功能的一个封装，这样使用起来非常方便，在其他小程序里面移植也很方便。
开发大概流程：
创建组件》开发组件内容》声明启用组件》在模板调用组件。
下面以做一个优惠券组件为例(wxml和wxss大部分 来自网络，仅做适配调整）：
创建一个coupon组件（我放在components/coupon/下面）：
然后编写wxml(coupon.wxml)
<view class="blank"></view> <view class="coupon-list"> <view class="item stamp stamp01 "> <!-- 左侧 --> <view class="float-li t1"> <view class="coupon-left"> <view class="t t1">￥</view> <view class="t t2">100</view> <view class="t t3">新人专享全场满199减30</view> <view class="t t4" bindtap="action">券码：264669616164</view> </view> </view> <!-- 右侧 --> <view class="float-li-rig"> <view class="coupon-rig"> <view class="t1 t">优惠券</view> <view class="t2 t">2018.01.17</view> <view class="t2 t">2018.01.25</view> <view class="t3 t action" bindtap="action"><text>立即领取</text></view> </view> </view> <i></i> </view> <view class="item stamp stamp02 "> <!-- 左侧 --> <view class="float-li t1"> <view class="coupon-left"> <view class="t t1">￥</view> <view class="t t2">100</view> <view class="t t3">新人专享全场满199减30</view> <view class="t t4">券码：264669616164</view> </view> </view> <!-- 右侧 --> <view class="float-li-rig"> <view class="coupon-rig"> <view class="t1 t">优惠券</view> <view class="t2 t">2018.01.17</view> <view class="t2 t">2018.01.25</view> <view class="t3 t action" bindtap="action"><text>立即领取</text></view> </view> </view> <i></i> </view> <view class="item stamp stamp03 "> <!-- 左侧 --> <view class="float-li t1"> <view class="coupon-left"> <view class="t t1">￥</view> <view class="t t2">100</view> <view class="t t3">新人专享全场满199减30</view> <view class="t t4">券码：264669616164</view> </view> </view> <!-- 右侧 --> <view class="float-li-rig"> <view class="coupon-rig"> <view class="t1 t">优惠券</view> <view class="t2 t">2018.01.17</view> <view class="t2 t">2018.01.25</view> <view class="t3 t action" bindtap="action"><text>立即领取</text></view> </view> </view> <i></i> </view> <view class="item stamp stamp04 "> <!-- 左侧 --> <view class="float-li t1"> <view class="coupon-left"> <view class="t t1">￥</view> <view class="t t2">100</view> <view class="t t3">新人专享全场满199减30</view> <view class="t t4">券码：264669616164</view> </view> </view> <!-- 右侧 --> <view class="float-li-rig"> <view class="coupon-rig"> <view class="t1 t">优惠券</view> <view class="t2 t">2018.01.17</view> <view class="t2 t">2018.01.25</view> <view class="t3 t action" bindtap="action"><text>立即领取</text></view> </view> </view> <i></i> </view> <view class="item stamp stamp05 "> <!-- 左侧 --> <view class="float-li t1"> <view class="coupon-left"> <view class="t t1">￥</view> <view class="t t2">100</view> <view class="t t3">新人专享全场满199减30</view> <view class="t t4" >券码：264669616164</view> </view> </view> <!-- 右侧 --> <view class="float-li-rig"> <view class="coupon-rig"> <view class="t1 t">优惠券</view> <view class="t2 t">2018.01.17</view> <view class="t2 t">2018.01.25</view> <view class="t3 t action" bindtap="action"><text>立即领取</text></view> </view> </view> <i></i> </view> <view class="item stamp stamp06 "> <!-- 左侧 --> <view class="float-li t1"> <view class="coupon-left"> <view class="t t1">￥</view> <view class="t t2">100</view> <view class="t t3">新人专享全场满199减30</view> <view class="t t4">券码：264669616164</view> </view> </view> <!-- 右侧 --> <view class="float-li-rig"> <view class="coupon-rig"> <view class="t1 t">优惠券</view> <view class="t2 t">2018.01.17</view> <view class="t2 t">2018.01.25</view> <view class="t3 t action" bindtap="action"><text>立即领取</text></view> </view> </view> <i></i> </view> </view> <view class="blank"></view> <view class="box note"> <view>优惠券使用方式：</view> <view>1、领取优惠券</view> <view>2、将购买的宝贝加入购物车</view> <view>3、点击结算时勾选使用优惠券</view> <view>4、提交订单、付款，订单完成</view> </view>
然后编写wxss样式(coupon.wxss)
.coupon-list{width: 710rpx; margin: 0 auto} .coupon-list .item{width: 98%; height: 250rpx; margin-bottom: 20rpx;margin: 10rpx auto;} .coupon-list .item .float-li{width: 63%;/* height: 100%;*/ border-right: 2rpx dashed rgba(255,255,255,.3)} .coupon-list .item .float-li-rig{width: 37%; /*padding-right: 20rpx;*/ /*height:100%;*/ color: #fff;float: right;} .coupon-left{position: relative} .coupon-left .t{position: absolute; color: #fff} .coupon-left .t1{left: 10rpx; top: 110rpx} .coupon-left .t2{left: 30rpx; top: 50rpx; font-size: 80rpx; font-weight: bold } .coupon-left .t3{left: 220rpx; top: 50rpx; width: 200rpx; font-size: 30rpx;} .coupon-left .t4{left: 10rpx; top:180rpx} .coupon-rig .t{text-align: center;} .coupon-rig .t1{/*font-size: 40rpx;*/ padding: 30rpx 0 10rpx 0;} .coupon-rig .t3{padding-top:20rpx} .coupon-rig .t3 text{background: #fff; color: #333; border-radius: 7rpx; padding: 10rpx 40rpx} .coupon-rig .t2.t{font-size: 30rpx;} .note{background: #faeab7;padding: 20rpx;} .stamp{margin-bottom:50rpx;position:relative;overflow:hidden} /*.stamp i{position: absolute;left: 20%;top: 90rpx;height: 500rpx;width: 700rpx;background-color: rgba(255,255,255,.15);transform: rotate(-30deg); }*/ .stamp i{clear:both;} .stamp01{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #F39B00 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #F39B00} .stamp02{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #D24161 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #D24161} .stamp03{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #D24161 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #7EAB1E } .stamp04{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #D24161 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #50ADD3 } .stamp05{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #D24161 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #f0229b} .stamp05{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #D24161 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #f0229b} .stamp06{background:radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 30rpx, #e2e2e2 30rpx);background-size:10rpx 10rpx;background-position:9rpx 3rpx; background: #acacac }根据需要在js里面编写内容(coupon.js)
Component({ behaviors: [], properties: { myProperty: { // 属性名 type: String, value: '' }, myProperty2: String // 简化的定义方式 }, data: {}, // 私有数据，可用于模板渲染 lifetimes: { // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () { }, moved: function () { }, detached: function () { }, }, // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖 ready: function () { }, pageLifetimes: { // 组件所在页面的生命周期函数 show: function () { }, hide: function () { }, resize: function () { }, }, methods: { action:function(e){ console.log(e); wx.showToast({ title:'领取成功', icon:'success' }) //todo 其他逻辑 }, onMyButtonTap: function () { this.setData({ // 更新属性和数据的方法与更新页面数据的方法类似 }) }, // 内部方法建议以下划线开头 _myPrivateMethod: function () { // 这里将 data.A[0].B 设为 'myPrivateData' this.setData({ 'A[0].B': 'myPrivateData' }) }, _propertyChange: function (newVal, oldVal) { } } });在需要调用组件的json声明使用组件（“coupon”名称可以自定义，后面的对应的组件所在位置，component是声明使用组件）(test.json)
{ "component": true, "usingComponents": { "coupon": "/components/coupon/coupon" } }在需要调用组件的view里面调用模板（tets.wxml）
<view> <!--下面就是json定义的coupon名称的组件--> <coupon></coupon> </view>
看效果
组件打包附件：
