微信小程序各種型的自定義組件篇

最近爲了遇上潮流和工做的須要我也開始搗鼓小程序項目。一開始小程序給我得感受是很是強大的，有比較完善的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自定義組件實現的效果：

上述只是分享了全局引用，若是想局部引用的話，原理也是同樣的，只是把全局引入變爲局部引入便可，以上便是本小白的分享，還請各大牛請噴。

注：這只是該組件展現最簡單的內容，本身能夠添加喜歡的東西，抱歉！！！