自定義組件我把它分為簡單的三個步驟, 1.創(chuàng)建組件 --- 2.編寫組件 --- 3.調(diào)用,使用組件.

第一步:創(chuàng)建組件 創(chuàng)建一個modal文件夾,里面包含 josn.wxml.wcss.js 四個文件,然后在josn里面添加 "component":true (作用是聲明這一組文件為自定義組件)

第二步. 編寫組件代碼

在modal.wxml :

[html] view plain copy
<view hidden='{{modalHidden}}'>  
  <view class='mask_layer' bindtap='modal_click_Hidden' />  
  <view class='modal_box'>  
    <view class="title">提示</view>  
    <view class='content'>  
      <text class='modalMsg'>{{modalMsg}}</text>  
    </view>  
    <view class='btn'>  
      <view bindtap='modal_click_Hidden' class='cancel'>取消</view>  
      <view bindtap='Sure' class='Sure'>確定</view>  
    </view>  
  </view>  
</view>

在modal.wxss:

[css] view plain copy
.mask_layer {  
  width: 100%;  
  height: 100%;  
  position: fixed;  
  z-index: 1000;  
  background: #000;  
  opacity: 0.5;  
  overflow: hidden;  
}  
.modal_box {  
  width: 76%;  
  overflow: hidden;  
  position: fixed;  
  top: 50%;  
  left: 0;  
  z-index: 1001;  
  background: #fafafa;  
  margin: -150px 12% 0 12%;  
  border-radius: 3px;  
}  

.title {  
  padding: 15px;  
  text-align: center;  
  background-color: gazure;  
}  

.content {  
  overflow-y: scroll; /*超出父盒子高度可滾動*/  
}  

.btn {  
  width: 100%;  
  margin-top: 65rpx;  
  display: flex;  
  flex-direction: row;  
  align-items: center;  
  justify-content: space-between;  
  box-sizing: border-box;  
  background-color: white;  
}  

.cancel {  
  width: 100%;  
  padding: 10px;  
  text-align: center;  
  color: red;  
}  

.Sure {  
  width: 100%;  
  padding: 10px;  
  background-color: gainsboro;  
  text-align: center;  
}  

.modalMsg {  
  text-align: center;  
  margin-top: 45rpx;  
  display: block;  
}

在modal.js

[javascript] view plain copy
Component({  
  properties: {  
    modalHidden: {  
      type: Boolean,  
      value: true  
    }, //這里定義了modalHidden屬性，屬性值可以在組件使用時指定.寫法為modal-hidden  
    modalMsg: {  
      type: String,  
      value: ' ',  
    }  
  },  
  data: {  
    // 這里是一些組件內(nèi)部數(shù)據(jù)  
    text: "text",  
  },  
  methods: {  
    // 這里放置自定義方法  
    modal_click_Hidden: function () {  
      this.setData({  
        modalHidden: true,  
      })  
    },  
    // 確定  
    Sure: function () {  
      console.log(this.data.text)  
    }  
  }  
})

第三步, 使用組件

這里我是在 pages/index/index 頁面調(diào)用 pages/modal/modal 自定義組件 首先在index.json中進行引用說明, 這里是設(shè)置自定義組件的標(biāo)簽名和引用路徑

[javascript] view plain copy 
{  
  "usingComponents": {  
    "modal": "../modal/modal"  
  }  
}

然后在index.wxml調(diào)用組件

[html] view plain copy 
<!-- 調(diào)用modal組件 -->  
<modal modal-hidden="{{is_modal_Hidden}}" modal-msg="{{is_modal_Msg}}"/>

在index.js綁定數(shù)據(jù),

[javascript] view plain copy 
Page({  
  data: {  
    is_modal_Hidden:false,  
    is_modal_Msg:'我是一個自定義組件'  
  }  
})

效果圖:

如果需要查看更加詳細的文檔,可以在官方文檔查看, 地址為:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/