微信小程序自定义组件（一）--Toast

场景：要写一个提示框不带icon的，能自动消失的。然而，官方给的并不能使用 wx.showToast和wx.showModal

Step1

新建一个 public 文件夹，用于存放我们以后开发中的所用组件，今天我们的目的是实现一个 弹框 组件，因此，我们在 public 组件中新建一个 toast 文件夹来存放我们的弹窗组件，此时你的项目结构应该如下:

67B5281C-998C-4BBD-A5C4-7699E03A5AF5.png

toast.wxml 代码

<view class="toast_content_box" wx:if="{{isShow}}">  
  <view class="toast_content">  
    <view class="toast_content_text">  
       {{dataText}}
    </view>  
  </view>  
</view> 

toasr.wxss 代码

/*toast*/ 
.toast_content_box {  
  display: flex;  
  width: 100%;  
  height: 100%;  
  justify-content: center;  
  align-items: center;  
  position: fixed;  
  z-index: 999;  
  top:0;
}  
.toast_content {    
  padding: 20rpx 40rpx;  
  background: rgba(0, 0, 0, 0.8);  
  border-radius: 20rpx;  
}  
.toast_content_text {  
  height: 100%;  
  width: 100%;  
  color: #fff;  
  font-size: 28rpx;  
  text-align: center;  
} 

toast.json 代码

{
  "component": true
}

toast.js 代码

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    dataText: '',
    isShow:false
  },
  methods: {
    //隐藏弹框
    hideDialog() {
      this.setData({
        isShow: !this.data.isShow
      })
    },
    //展示弹框
    showDialog(data) {
      this.setData({
        isShow: !this.data.isShow,
        dataText: data
      })
      var _this = this
      // 定时器关闭  
      setTimeout(function () {
        _this.hideDialog()
      }, 1000);
    }
  }
})

Step2

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径

{
 "usingComponents": {
    "toast": "../public/toast/toast"
  }
}

Step3

这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

 <toast inner-text=""  id='toastDialog'></toast>

注意 这里面的 inner-text="" 可以传参

Step4

我写的这个组件提供了一个外面可以调的方法

66B65B23-276D-427B-8398-DD2BA09B87BF.png

在页面调用的时候,先需要在js获取组件

onReady: function () {
    //获得dialog组件 
    this.toastDialog = this.selectComponent("#toastDialog");//此处id和页面的 wxml中的id一致
  },

然后就可以在其他地方调用了

this.toastDialog.showDialog('自定义toast组件');

最终效果

1220270-20170816142404662-1065843149.png