????????本人是做Android出身，一開始對本專業(yè)還是難舍難分的，相信一些過來的人都能體會的。真正涉及到前端界，還是在16年底，那時候React-Native新進(jìn)花旦，熱度一度飆升，曾有傳言要統(tǒng)治移動端。當(dāng)時，公司CTO決定試試水，從此我便一只腳踏上了前端之路。
? ? ????由于RN的部分前端基礎(chǔ)，在18年初，公司決定進(jìn)軍微信小程序，于是我又來了。那么在經(jīng)歷了一年多的斷斷續(xù)續(xù)獨(dú)立開發(fā)了2個項(xiàng)目后，我對于小程序的又有了什么理解呢？之前是只做功能，不管代碼風(fēng)格，復(fù)用，分包等，現(xiàn)在越來越注重代碼的質(zhì)量了，當(dāng)然這些會給你帶來更少的bug。
? ? ? ? 言歸正傳，我們平時會使用到類似下面這種item，當(dāng)然左邊也可以加icon的
????????一般來說我們都會各個頁面都自己寫自己的，但是后來發(fā)現(xiàn)這種方式最直接的弊端就是增加代碼量，使項(xiàng)目的體積越來越大。我們知道小程序?qū)τ隗w積是有大小限制的，目前是最大8M，每個包最大2M，而且包太大也會影響加載效率。所以，我們需要用最少的代碼實(shí)現(xiàn)更多的功能。上述這些item，我們其實(shí)能抽象出來，作為獨(dú)立的自定義組件。
在項(xiàng)目結(jié)構(gòu)里可以單獨(dú)一個文件夾，比如component，里面放置各種自定義的組件，我的項(xiàng)目部分目錄如下
????????在component目錄上右鍵，選擇新建component，名字可以自己隨意取，比如上圖的myitem，建好之后就如上圖。其實(shí)和普通頁面的頁面結(jié)構(gòu)是一樣的，json和js文件是有區(qū)別的，讀者可以自行比對。
第一步：修改wxml文件
1）打開wxml文件，可以寫上自己的通用代碼，下面貼上我自己的item通用代碼
????????其實(shí)這就是我們平時寫的界面，只是抽取了部分變量，由父組件傳入。比如，class，leftIcon，tabHeight等，還有事件onItemClick等。那么這些東西我們都需要在js文件里配置好。但是對于樣式及class，如果我們在自定義組件內(nèi)的wxss里已經(jīng)定義了，那么再由外部傳入時，相同屬性的會不起作用。所以推薦都是由外部傳入，對于一些不變的樣式可以在自定義組件內(nèi)寫死。js樣例文件如下：
由于此處樣式大多都是在自定義組件內(nèi)使用，所以就寫在了myitem.wxss中
第二步：使用
1）接下來我們需要引入到我們需要使用的地方，在需要引入的地方的js文件中
備注：注意如果只使用一個自定義組件，那么需要把后面的逗號去掉
2）再使用處中使用myitem，和最開始的樣例圖對應(yīng)
至此，簡單的組件自定義相信大家都有方向了。
