微信小程序的自定義組件的實(shí)現(xiàn)方法
更新時(shí)間：2024年05月16日 10:18:58 投稿：mrr
這篇文章主要介紹了微信小程序的自定義組件的實(shí)現(xiàn)方法,把頁面重復(fù)的代碼部分封裝成為一個(gè)自定義組件,以便在不同的頁面中重復(fù)使用,有助于代碼的維護(hù),感興趣的朋友跟隨小編一起看看吧
一、創(chuàng)建自定義組件
（1）定義：
把頁面重復(fù)的代碼部分封裝成為一個(gè)自定義組件，以便在不同的頁面中重復(fù)使用，有助于代碼的維護(hù)。
（2）組成：
自定義組件的組成：json文件，js文件，wxml文件，wxss文件
（也就是配置，邏輯，結(jié)構(gòu)，樣式）
（3）使用：
在components文件夾下新建一個(gè)文件夾，命名為test。test文件夾下新建component。然后自定義命名為test敲回車
（4）此時(shí)，test.js里面會出現(xiàn)如下屬性。
data屬性，可讀可寫，更傾向于儲存組件的私有數(shù)據(jù)
properties屬性，可讀可寫，更傾向于存儲外界傳遞的公有數(shù)據(jù)
（5）在test.wxml里面寫好自定義組件封裝的內(nèi)容：
<view>我是自定義組件test</view>
二、使用自定義組件
（1）使用前提：
在頁面的json文件或app.json里修改全局配置
自定義組件的引用方式：
局部引用：在頁面的json文件中引用自定義組件
全局引用：在app.json全局配置文件中引用自定義組件
（2）使用：
在app.json里面：
然后直接在pages下的index.wxml引用自定義組件test
（3）效果如圖所示：
到此這篇關(guān)于微信小程序的自定義組件的文章就介紹到這了,更多相關(guān)微信小程序自定義組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- 微信小程序自定義組件實(shí)現(xiàn)多選功能
- 微信小程序自定義組件與頁面的相互傳參
- 一步步教你實(shí)現(xiàn)微信小程序自定義組件
- 微信小程序?qū)崿F(xiàn)頁面監(jiān)聽自定義組件的觸發(fā)事件
- 微信小程序自定義組件components(代碼詳解)
- 微信小程序頁面調(diào)用自定義組件內(nèi)的事件詳解
- 詳解微信小程序自定義組件的實(shí)現(xiàn)及數(shù)據(jù)交互
- 微信小程序自定義組件實(shí)現(xiàn)環(huán)形進(jìn)度條
- 微信小程序自定義組件傳值 頁面和組件相互傳數(shù)據(jù)操作示例
- 微信小程序自定義組件的實(shí)現(xiàn)方法及自定義組件與頁面間的數(shù)據(jù)傳遞問題
- 微信小程序自定義組件封裝及父子間組件傳值的方法
相關(guān)文章
今天小編就為大家分享一篇layui獲取多選框中的值方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JS正則匹配中文的方法,結(jié)合具體實(shí)例形式分析了JS針對中文的匹配操作相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下2017-01-01
Javascript異步表單提交，圖片上傳，兼容異步模擬ajax技術(shù)
使用Javascript異步表單提交，圖片上傳，兼容異步模擬ajax技術(shù),需要的朋友可以參考下。2010-05-05
如何將一維度數(shù)組轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu)
在開發(fā)過程中,可能會遇到需要將一維數(shù)組轉(zhuǎn)換為多維數(shù)組的情況,以滿足特定數(shù)據(jù)結(jié)構(gòu)的需求,文章介紹了如何將后端返回的一維列表數(shù)據(jù)通過編程方法轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu),以適應(yīng)特定的UI展示需求,通過循環(huán)遍歷和數(shù)據(jù)重組的方式,可以有效地實(shí)現(xiàn)數(shù)組結(jié)構(gòu)的轉(zhuǎn)換2024-09-09
這篇文章主要介紹了詳解如何在微信小程序中愉快地使用sass，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
JavaScript中如何通過arguments對象實(shí)現(xiàn)對象的重載
js 中不存在函數(shù)的重載，但卻可以通過arguments對象實(shí)現(xiàn)對象的重載，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-05-05
Bootstrap每天必學(xué)之表單，本文講解的就是大家最為常用的提交數(shù)據(jù)的Form表單，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了微信小程序常用賦值方法,結(jié)合實(shí)例形式總結(jié)了微信小程序局部變量、全局變量及data對象屬性賦值相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
JS函數(shù)修改html的元素內(nèi)容,及修改屬性內(nèi)容的方法
下面小編就為大家?guī)硪黄狫S函數(shù)修改html的元素內(nèi)容,及修改屬性內(nèi)容的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10