微信小程序自定义组件简单实现（一）

「爱情、让人受尽委屈。」 2023-06-17 02:04 7阅读 0赞

本文将教你如何实现一个自定义的toast提示框，实现后的基本效果图如下:

![format_png][]

![format_png 1][]

小程序中一个自定义组件由 json wxml wxss js 4个文件组成的。下面我们一步一步地来创建文件及完成其中的配置：

## 1：创建自定义组件 ##

首先创建一个components文件夹，用于放置所有自定义的组件，创建之后的目录结构为

![format_png 2][]

其中的toastedit是我们本次要实现的toast提示框组件。

## 2：基本配置 ##

toastedit.json（进行自定义组件声明）

{
      "component": true
    }

toastedit.wxml

<view class='wx_toast_container' hidden="{
       {!toastShow}}">
      <view class='wx_toast_text'>{
       {toastText}}</view>
    </view>

toastedit.wxss

.wx_toast_container{
        position: fixed; 
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }
    .wx_toast_text{
        background:rgba(0,0,0,0.95);
        color:white;
        text-align:center;
        font-size:34rpx;
        padding:34rpx 50rpx;
        border-radius:20rpx;
        max-width:70%;
        min-width:35%;
        box-sizing:border-box;
        line-height:120%;
    }

toastedit.js

<code class="language-javascript">//这一行不要
    Component({  
      options: {  
        multipleSlots: true // 在组件定义时的选项中启用多slot支持  
      },  
      /** 
       * 组件的属性列表 
       */  
      properties: {  
        toastText: {            // 属性名  
          type: String,  
          value: '内容'  
        }  
      },  
      /** 
       * 组件的初始数据 
       */  
      data: {  
        toastShow:false,  
      },  
      /** 
       * 组件的方法列表 
       */  
      methods: {  
        showToast(text,time) {  
          this.setData({  
            toastShow: !this.data.toastShow,  
            toastText: text  
          })  
      
          var that = this  
      
          if (!time){  
            time = 8000  
          }  
      
          setTimeout(function(){  
            that.setData({  
              toastShow: !that.data.toastShow  
            })  
          }, time)  
        }  
      }  
    })  
    </code>  //这一行不要

## 3：使用组件 ##

我们要在index.wxml中使用组件的话，首先要在index.json中进行声明

<code class="language-html">//这一行不要
    {  
      "usingComponents": {  
          "toastedit": "/components/toastedit/toastedit"  
      }  
    }
    </code>  //这一行不要

紧接着需要在index.wxml中进行组件的引用

<view>
        <toastedit id="toastedit">{
       {toastText}}</toastedit>     
        <button type="primary" bindtap="showToast"> showToast! </button>
    </view>

最后index.js的配置如下

Page({
      onReady: function () {
        //获得toastedit组件
        this.toastedit = this.selectComponent("#toastedit")
     
      },
      showToast: function () {
        this.toastedit.showToast('我是传过来的toast内容',2000)
      }
    })

完成上面这几步，一个简单的小程序自定义组件就完成了，使用时只需要执行（可自定义提示框显示的文本及显示的时长）

this.toastedit.showToast('哇塞！成功了~',2000)  
运行结果如下：

![format_png 3][]

作者：world\_7735  
链接：https://www.jianshu.com/p/34dea82fc312  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjY5MzU2My0yZjZjYzNiNTk1ZDYwNzJkLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzMxNi9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjY5MzU2My03ZTFhY2I1ZDJmMTRhMDU4LnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzMyNC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjY5MzU2My1mZTc0ZGRhYmM2ODMwMjU0LnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzMzMC9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xMjY5MzU2My1iMzEwMzU5ZGM1ODc0ZGFhLnBuZz9pbWFnZU1vZ3IyL2F1dG8tb3JpZW50L3N0cmlwfGltYWdlVmlldzIvMi93LzM1Ny9mb3JtYXQvd2VicA?x-oss-process=image/format,png