百度智能小程序组件的使用

因为之前也因为兴趣写过几个微信小程序，经理让我开发一个百度智能小程序，因为智能小程序是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中定义好组件的风格样式。