微信小程序各种型的自定义组件篇

最近为了遇上潮流和工做的须要我也开始捣鼓小程序项目。一开始小程序给我得感受是很是强大的，有比较完善的API和相应的组件，并且用起来挺简单的，但官方限制太多，如wx.showToast这个API用起来感受只能按照官方的样式，因此就本身经过网上大神的方法本身写了一个自定义的toast组件，很差的地方请多多指教。

源码下载地址：https://github.com/kjs-zjl/WeChat

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

或者是loading状态的：

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

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

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

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

 

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

三、至于显示的样式我就不作解释了，直接看代码，固然大家能够根据本身的方式书写样式：

四、toastTest.js的代码以下：

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

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

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

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

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

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

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

注：这只是该组件展现最简单的内容，本身能够添加喜欢的东西，抱歉！！！