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