微信小程序之自定义组件的实现代码（附源码）

{
 "ponent": true,
 "usingComponents": {}
}

<!-- 这是自定义组件的内部WXML结构 suess.wxml-->
<view class='modal-section' wx:if="{{modalHidden}}">
 <view class='modal-opaci' bindtap='modal_click_Hidden'></view>
 <view class='modal-cont'>
 <icon type='{{modalIcon}}' size='70'></icon>
 <text class='modal-titleTxt {{modalIcon}}'>{{modalTitle}}</text>
 <text class='suess-msg'>{{modalDesc}}</text>
 </view>
</view>

/ 这里的样式只应用于这个自定义组件 /
/suessModal.wxss/
.modal-opaci {
 position: absolute;
 left: 0;
 : 0;
 z-index: 100;
 height: 100%;
 width: 100%;
 background: black;
 opacity: 0.4;
 filter: alpha(opacity=40);
}
.modal-cont {
 position: fixed;
 : 30%;
 left: 8.5%;
 z-index: 999;
 border-radius: 20rpx;
 padding: 40rpx 150rpx;
 background-color: #fff;
 text-align: center;
}
.modal-cont text {
 line-height: 90rpx;
 display: block;
}
.suess {
 color: #09bb07;
}
.modal-titleTxt {
 font-size: 50rpx;
 font-weight: 700;
}
.warn {
 color: #f76260;
}

//suessModal.js
Component({
 /
  组件的属性列表
 /
 properties: {
 //这里定义了modalHidden属性，属性值可以在组件使用时指定.写法为modal-hidden 
 modalHidden: {
  type: Boolean,
  value: true
 },
 modalIcon: {
  type: String,
  value: ' ',
 },
 modalTitle: {
  type: String,
  value: ' ',
 },
 modalDesc: {
  type: String,
  value: ' ',
 }
 },

 /
  组件的初始数据
 /
 data: {

 },

 /
  组件的方法列表
 /
 methods: {
 // 这里是自定义方法
 modal_click_Hidden: function () {
  this.setData({
  modalHidden: false,
  })
 },
 }
})

//index.json
{
 "usingComponents": {
 "modal-suess": "../../ponent/suessModal/suessModal" //在这里写上页面中自定义的标签名和自定义组件的文件路径
 },
 "navigationBarTitleText": "首页"
}

<!--index.wxml-->
<view class="container">
 <view class="demoBtn" bindtap="bindViewTap">
 <text>点击</text>
 </view>
 <!-- 调用modal组件 -->
 <modal-suess modal-hidden="{{is_modal_Hidden}}" modal-icon="{{is_modal_icon}}" modal-title="{{is_modal_title}}" modal-desc="{{is_modal_desc}}" />
</view>