微信小程序的自定義組件的實(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里面會(huì)出現(xiàn)如下屬性。

data屬性，可讀可寫，更傾向于儲(chǔ)存組件的私有數(shù)據(jù)

properties屬性，可讀可寫，更傾向于存儲(chǔ)外界傳遞的公有數(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

js 去掉字符串前后空格實(shí)現(xiàn)代碼集合
這篇文章主要介紹了js 去掉字符串前后空格實(shí)現(xiàn)代碼集合,需要的朋友可以參考下
2017-03-03
JavaScript實(shí)現(xiàn)簡單的拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的拖動(dòng)效果，具有一定的參考價(jià)值，感興趣的朋友可以參考一下
2016-07-07
jstl中判斷l(xiāng)ist中是否包含某個(gè)值的簡單方法
下面小編就為大家?guī)硪黄猨stl中判斷l(xiāng)ist中是否包含某個(gè)值的簡單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-10-10
使用PBFunc在Powerbuilder中支付寶當(dāng)面付款功能
這篇文章主要介紹了使用PBFunc在Powerbuilder中支付寶當(dāng)面付款功能的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-10-10
Javascript操縱Cookie實(shí)現(xiàn)購物車程序
Javascript操縱Cookie實(shí)現(xiàn)購物車程序...
2007-02-02
JS實(shí)現(xiàn)的簡潔縱向滑動(dòng)菜單(滑動(dòng)門)效果
這篇文章主要介紹了JS實(shí)現(xiàn)的簡潔縱向滑動(dòng)菜單(滑動(dòng)門)效果,通過簡單的頁面元素遍歷實(shí)現(xiàn)華東切換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
共享自己寫一個(gè)框架DreamScript
共享自己寫一個(gè)框架DreamScript...
2007-01-01
利用純JS實(shí)現(xiàn)JSON轉(zhuǎn)CSV的技巧全攻略
在數(shù)據(jù)處理和導(dǎo)出方面,JSON 和 CSV 格式是兩個(gè)常見的角色,今天,我們將介紹如何在純 JavaScript 中,利用開源庫 @json2csv/plainjs 輕松實(shí)現(xiàn)從 JSON 轉(zhuǎn)換到 CSV,幫助你高效處理數(shù)據(jù),需要的朋友可以參考下
2025-06-06
js實(shí)現(xiàn)點(diǎn)贊效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)贊效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
Javascript中的匿名函數(shù)與封裝介紹
這篇文章主要介紹了Javascript中的匿名函數(shù)與封裝介紹,本文分析了jQuery 封裝、Backbone 封裝、Underscore 封裝等內(nèi)容,需要的朋友可以參考下
2015-03-03