因為之前也因為興趣自己做著玩過幾個微信小程式，經理讓我開發一個百度智慧小程式，因為智慧小程式是7月多才釋出的框架，所以基本上處於一邊看文件一邊敲程式碼的節奏。

在寫完一組模板後，我想做下程式碼重構，就用到了小程式的自定義元件。 顧名思義開發者可以將頁面內的功能模組抽象成自定義元件，在智慧小程式的各個頁面中進行使用，提升程式碼複用度，節省開發成本。

以下用簡單的輪播圖做例子，可以直接copy使用

//元件頁面

.swan

	<view class="swiper-wrap">
		<swiper indicator-color="rgba(0,0,0,0.30)" indicator-active-color="#fff" duration="500" interval="2000" autoplay="true" indicator-dots="true" vertical="false" circular="true" bind:change="swiperChange">
			<block s-for="item in imgUrls">
				<swiper-item>
					<image style="width: 100%; height:100%; background-color: #eeeeee;" src="{{item}}"></image>
					<view style>123456</view>
				</swiper-item>
			</block>
		</swiper>
	</view>
	
 

.css

	.wrap {
	    font-size: .16rem;
	    background-color: red;
	}
	.swiper-wrap {
	    width: 100%;
	    margin: 10rpx auto;
	}
	

.js

	Component({
	    properties: {
	        // 定義了imgUrls屬性，可以在使用元件時，由外部傳入。此變數可以直接在元件模板中使用
	        imgUrls: []
	    },
	    data: {
			//模板自帶的資料寫在這裡
	    },
	    methods: {
	        tap: function(){}
	    }
	})
	
 

.json 標註元件

	{
	  "component": true
	}
	

//呼叫元件頁面

.swan

	//傳參呼叫
	<broadcast-component imgUrls="{{imgUrls}}"></broadcast-component>
	

.css

	.wrap {
	    font-size: .16rem;
	    background-color: red;
	}
	.swiper-wrap {
	    width: 100%;
	    margin: 10rpx auto;
	}
	

.js

	Page({
	    data: {
			//定義好需要傳入模板的資料
	        imgUrls: [
	            '../../images/broadcast/b1.jpg',
	            '../../images/broadcast/b2.jpg',
	            '../../images/broadcast/b3.jpg'
	        ] 
	    }
	})
	
 

.json 引入元件並定義標籤名

	{
	    "usingComponents": {
		    //標籤名 : "元件頁面路徑(相對絕對都行)"
	        "broadcast-component": "../assembly/broadcast/broadcast"
	    } 
	}      
	

注意！！：可能因為智慧小程式框架不完善，在引入元件時元件的css會失效，所以最好在引用頁面的css中定義好元件的風格樣式。