小程序如何封裝自定義組件（Toast）

1、創(chuàng)建和pages 同級(jí)的component目錄新建一個(gè)myToast目錄 例如:

2、myToast.wxml文件內(nèi)容:

<!-- 自定義toast組件 -->
<!-- name 模塊名稱   -->
 <template name="toast" >
 <!-- catchtouchmove=‘xxx’ 遮罩層的滾動(dòng)穿透 -->
 <!-- isHide 顯示消失 -->
  <view class="toast_content_box" wx:if="{{ isHide }}" 
catchtouchmove="preventdefault">  
    <view class="toast_content">  
      <view class='toast_content_text'>
          <!-- 內(nèi)容 -->
          {{content}} 
      </view>
    </view>  
  </view> 
 </template> 

3、myToast.wxss文件樣式（根據(jù)自己ui樣式去寫）：

.toast_content_box {  
  overflow: hidden;
  display: flex;  
  width: 100%;  
  height: 100%;  
  justify-content: center;  
  align-items: center;  
  position: fixed;  
  z-index: 999;  
  background-color: rgba(0, 0, 0, 0.3)
} 
.toast_content {  
   width: 50%;
  padding: 30rpx;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 20rpx;
}  
.toast_content_text {  
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  font-weight: 300;
}

4、myToast.js文件內(nèi)容：

let _compData = {
  '_toast_.isHide': false,// 控制組件顯示隱藏
  '_toast_.content': '',// 顯示的內(nèi)容
}
let toastPannel = {
  // toast顯示的方法
  ShowToast: function (data) {
    let self = this;
    this.setData({ '_toast_.isHide': true, '_toast_.content': data });
  },
  // toast隱藏的方法
  HideToast: function (data) {
    let self = this;
    self.setData({ '_toast_.isHide': false })
  },
  // toast顯示的方法 2000后隱藏
  ShowToastTime: function (data) {
    let self = this;
    this.setData({ '_toast_.isHide': true, '_toast_.content': data });
    setTimeout(() => {
      this.setData({ '_toast_.isHide': false, '_toast_.content': data });
    }, 2000)
  },
}

function ToastPannel() {
  // 拿到當(dāng)前頁(yè)面對(duì)象
  let pages = getCurrentPages();
  let curPage = pages[pages.length - 1];
  this.__page = curPage;
  // 小程序最新版把原型鏈干掉了。。。換種寫法
  Object.assign(curPage, toastPannel);
  // 附加到page上，方便訪問(wèn)
  curPage.toastPannel = this;
  // 把組件的數(shù)據(jù)合并到頁(yè)面的data對(duì)象中
  curPage.setData(_compData);
  return this;
}
module.exports = {
  ToastPannel
}

5、全局引入， 在項(xiàng)目中的app.js中將組件腳本引入供全局使用，引入方法：接收暴露出來(lái)的構(gòu)造函數(shù)

6、 全局引入樣式在app.wxss

7、在需要使用該組件的頁(yè)面將模塊引入：

8、在引入模塊組件 同級(jí)的js中實(shí)例組件的構(gòu)造函數(shù)：

9、點(diǎn)擊按鈕實(shí)現(xiàn)效果

組件比較簡(jiǎn)單、如果需求不同另行修改。