1.寫這篇博客的原因
原因很簡單棉姐,微信官方文檔寫的不是很清楚伍掀。騰訊只是介紹了一些組件的特性怎么使用偎快。
附上小程序自定義控件教程的官方地址:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/
2.最后的結(jié)果
3.具體的操作步驟
3.1 創(chuàng)建一個自定義組件customComponent
3.2 在customComponent.json文件里面配置一下
{
"component": true, // 組件的聲明
"usingComponents": {} // 使用別的組件
}
騰訊默認情況下生成的組件配置文件囊咏,就是這個。如果沒有使用別的組件来涨,不用改就行了图焰。注意,我是為了便于理解加了注釋蹦掐。直接這樣加會報錯技羔。實際運行的時候僵闯,去掉即可。
3.3 在自定義組件中編寫自己的代碼
為了簡單藤滥,我就改變一下customComponent.wxml文件鳖粟。
<!--pages/customComponent/customComponent.wxml-->
<text>我是自定義組件,我就想試試</text>
3.4 在其他組件中超陆,使用自定義組件
3.4.1 聲明要使用自定義組件
我就在index組件中牺弹,使用這個自定義組件浦马。
因為小程序的index組件中默認沒有index.json文件时呀,那就新建一個index.json文件。然后添加代碼晶默。
{
"usingComponents": {
"customComponentaaa": "/pages/customComponent/customComponent"
}
}
然后谨娜,我們自定義的組件標簽customComponentaaa,就可以當做一個組件使用了磺陡。這里customComponent后面加aaa趴梢,是為了便于區(qū)分。
3.4.2 使用自定義組件
<!--index.wxml-->
<customComponentaaa></customComponentaaa>
運行一下之后币他,就會呈現(xiàn)出結(jié)果:
4.結(jié)束語
下一次寫一個項目實戰(zhàn)中能用到的對話框坞靶。