微信小程序新手入門之自定義組件的使用
前言
從小程序基礎(chǔ)庫版本 1.6.3 開始,小程序支持簡潔的組件化編程。所有自定義組件相關(guān)特性都需要基礎(chǔ)庫版本 1.6.3 或更高。
開發(fā)者可以將頁面內(nèi)的功能模塊抽象成自定義組件,以便在不同的頁面中重復(fù)使用;也可以將復(fù)雜的頁面拆分成多個(gè)低耦合的模塊,有助于代碼維護(hù)。
一、小程序的好處和特點(diǎn)
1、好處
開發(fā)者:小程序開發(fā)門檻相對較低,難度不及APP,能夠滿足簡單的基礎(chǔ)應(yīng)用,適合生活服務(wù)類線下商鋪以及非剛需低頻應(yīng)用的轉(zhuǎn)換;也能節(jié)約開發(fā)和推廣成本。
用戶:能夠節(jié)約使用時(shí)間成本和手機(jī)內(nèi)存空間。對于開發(fā)者來說
2、特點(diǎn)
便捷性:小程序是不需要下載安裝的,即用即走,非常方便用戶的使用。并且不占用手機(jī)的內(nèi)存,很便捷。
唯一性:小程序的名稱是具有唯一性的,誰先注冊就是誰的,當(dāng)別人已經(jīng)注冊成功了,你是沒有辦法在注冊的。
二、為什么要使用自定義組件
在寫小程序的時(shí)候,可能存在很多個(gè)頁面要使用同一個(gè)組件的情況,比如說,設(shè)計(jì)了4個(gè)頁面,每個(gè)頁面的頂部都需要顯示一個(gè)搜索框,如果在每個(gè)頁面都復(fù)制同一份搜索框的代碼,會(huì)比較繁雜,代碼可讀性比較差,也不易于后期代碼維護(hù),此時(shí)可以單獨(dú)封裝為一個(gè)組件,大概意思就是,也就是通常說的自定義組件,此后哪個(gè)頁面需要用到時(shí)就直接在對應(yīng)頁面的json文件中引入即可。
三、怎么使用自定義組件
1、打開項(xiàng)目文件目錄,新建一個(gè)compoments目錄
2、在compoments目錄里,新建一個(gè)組件名
3、右鍵單擊選擇新建compoment
4、在自定義組件(prolist)里完成邏輯代碼 5、在要引用組件的頁面中的json文件中,注冊組件
6、在頁面的wxml中就可以使用prolist組件
7、在組件(prolist)中接收傳過來的值
8、接收的值可以在組件的wxml文件中直接使用
總結(jié)
- 新建一個(gè)目錄存放自定義組件
- 再新建一個(gè)組件的文件夾
- 創(chuàng)建compoment
- 完成組件的邏輯代碼
- 在其他頁面注冊組件
- 使用組件
到此這篇關(guān)于微信小程序新手入門之自定義組件使用的文章就介紹到這了,更多相關(guān)微信小程序自定義組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js實(shí)現(xiàn)數(shù)組冒泡排序、快速排序原理
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)組冒泡排序、快速排序的原理,感興趣的小伙伴們可以參考一下2016-03-03javascript實(shí)現(xiàn)仿騰訊游戲選擇
這篇文章主要介紹了javascript實(shí)現(xiàn)仿騰訊游戲選擇,簡單實(shí)現(xiàn)的下拉菜單二級聯(lián)動(dòng)效果,十分不錯(cuò),有需要的小伙伴可以參考下。2015-05-05JavaScript設(shè)計(jì)模式中的觀察者模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式中的觀察者模式,觀察者設(shè)計(jì)模式適用于監(jiān)聽一對多的操作,例如監(jiān)聽對象屬性的修改等等,觀察者模式能夠降低代碼耦合度,提升可擴(kuò)展性2022-06-06Javascript實(shí)現(xiàn)圖片輪播效果(一)讓圖片跳動(dòng)起來
圖片輪播效果,在各大網(wǎng)站的首頁都能看到,比較常見,下面腳本之家小編給大家介紹Javascript實(shí)現(xiàn)圖片輪播效果(一)讓圖片跳動(dòng)起來,需要的朋友參考下2016-02-02原生JS實(shí)現(xiàn)點(diǎn)擊數(shù)字小游戲
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)點(diǎn)擊數(shù)字小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04頁面實(shí)時(shí)更新時(shí)間的JS實(shí)例代碼
這篇文章主要介紹了頁面實(shí)時(shí)更新時(shí)間的JS實(shí)例代碼,有需要的朋友可以參考一下2013-12-12js實(shí)現(xiàn)同一個(gè)頁面,多個(gè)enter事件綁定的示例
今天小編就為大家分享一篇js實(shí)現(xiàn)同一個(gè)頁面,多個(gè)enter事件綁定的示例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10