微信开发之自定义组件（Toast）

分享一个自定义的toast组件。下面我在这里做粗略的分享，不好的地方请多多指教。

首先，我们来看看官方给的wx.showToas这个API的展示形式：

或者是loading状态的：

它的用法也非常简单，直接copy官方API代码就直接可以使用，官方代码：

非常简洁，更多可以去官网学习，在这里就不多讲了。官方给的这个API中有提到如何更改提示的内容，但是除了这个好像并没有提到如何自定义样式，及显示自定义图标等方法，所以在项目上实用之处就非常少了，我总不能弹出一个报错的提示框也是这两种当中选一种吧？为此，我只能自己根据需求开发一个自定义的toast组件。

 那么下面我就分享一个自己写的toast组件（全局）：

1、在component目录中新建一个toastTest目录，如图：

 

2、在toastTest.wxml文件中新建一个template（自定义组件模块），代码如图所示：

3、至于显示的样式我就不做解释了，直接看代码，当然你们可以根据自己的方式书写样式：

4、toastTest.js的代码如下：

在_comData中你可以添加你想展示的内容，如：title、pic等都可以往里面塞，只是你要在样式表中做相应的样式处理即可；toastPannel对象中是包含了一些自定义的方法，如我的代码中有切换组件显示隐藏的开关和接收到的显示内容；ToastPannel是一个构造函数，在这里需要通过官方给出的getCurrentPages()方法获取到要使用组件的当前页，并且将该组件的data和相应的方法附加到当前页面中，方便当前页访问；最后将该组件的构造函数暴露出来，让其他页面可以直接引用。

6、全局引用，在项目中的app.js中将组件脚本引入供全局使用，引入方法：接收暴露出来的构造函数

并且全局引入组件的样式表：

7、在需要使用该组件的页面将模块引入，如我在toastDemo目录中的toast.wxml文件中引入组件的模块：

8、在当前页面的js文件中实例组件的构造函数，如我的toast.js文件中实例代码：

9、toast自定义组件实现的效果：

上述只是分享了全局引用，如果想局部引用的话，原理也是一样的，只是把全局引入变为局部引入即可，以上即是本小白的分享，还请各大牛请喷。

注：这只是该组件展示最简单的内容，自己可以添加喜欢的东西，抱歉！！！

本文转自：https://www.cnblogs.com/Jacky-MYD/articles/7372365.html