微信小程式各型別的自定義元件篇

2022-07-17 11:36:07 字數 1884 閱讀 1433

最近為了趕上潮流和工作的需要我也開始搗鼓小程式專案。一開始小程式給我得感覺是非常強大的,有比較完善的api和相應的元件,而且用起來挺簡單的,但官方限制太多,如wx.showtoast這個api用起來感覺只能按照官方的樣式,所以就自己通過網上大神的方法自己寫了乙個自定義的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和相應的方法附加到當前頁面中,方便當前頁訪問;最後將該元件的建構函式暴露出來,讓其他頁面可以直接引用。

並且全域性引入元件的樣式表:

7、在需要使用該元件的頁面將模組引入,如我在toastdemo目錄中的toast.wxml檔案中引入元件的模組:

8、在當前頁面的js檔案中例項元件的建構函式,如我的toast.js檔案中例項**:

9、toast自定義元件實現的效果:

上述只是分享了全域性引用,如果想區域性引用的話,原理也是一樣的,只是把全域性引入變為區域性引入即可,以上即是本小白的分享,還請各大牛請噴。

注:這只是該元件展示最簡單的內容,自己可以新增喜歡的東西,抱歉!!!

微信小程式自定義元件

父元素 子元件 可以由多個 子元件 a,b,c,d 父元素 首先是關於元件的建立 1 單獨建立乙個資料夾存放 wxss x.js wxml json這四個檔案,其中主要對元件進行宣告的是json檔案,需要寫入 這段 就是讓元件允許被使用,如果元件需要呼叫另乙個元件中,那麼就需要再usingcompe...

微信小程式自定義元件

根據專案需要,抽離出公共的元件。1 在專案根目錄新建乙個component的資料夾,然後新建自己需要的檔案 專案目錄如下 在component裡面我新建了3個子元件。2 子元件的寫法 只有js檔案格式不一樣,其他的檔案都正常寫。js需要自定義乙個component,參考 示例 component d...

微信小程式 自定義元件

建立自定義元件 元件的構成類似頁面,由json wxml wxss js 4個檔案組成。在新建乙個元件的時候需要在元件的json檔案中設定 components 字段 true 在元件wxss中不應使用id選擇器 屬性選擇器和標籤名選擇器。這句是官方說的,我想應該是會全域性汙染 自定義元件的js檔案...