微信开放文档

小程序开发原则

1.尽量不要为组件设置高宽，而是让组件撑起来
2.页面复杂需要拆分组件

0.对页面和功能进行拆分
1.编写骨架
2.获取数据填充页面
3.设置样式

View容器

view相当于html中的div标签，叫做容器

1.view标签支持点击动画，通过设置hover-class的样式

<view hover-class="" hover-stay-time="">

</view>

Image组件

<image mode="" src=""></image>

1.小程序的image图片默认宽度320px、高度240px，所以在任何位置使用图片时都需要指定其宽高

2.image组件默认与view有10px的间隙，可以设置它自身的样式

image{
	display:flex;
}

3.image组件的mode模式可以让图片自适应和裁剪：

Swiper轮播组件

1.使用swiper和swiper-item容器，详细的配置项查询文档.

<swiper>
	<swiper-item>
		//想要展示的内容
	</swiper-item>
</swiper>

如果有多个不确定的swiper-item，可以使用列表渲染：

<swiper>
	<block wx:for="{{array}}">
			<swiper-item>
					//想要展示的内容
			</swiper-item>
	</block>
</swiper>

2.如果想要内容高和宽铺满，需要设置两个地方：内容的高宽以及swiper容器的高宽

Scroll-view使用

scroll-view需要指定高度，如果需要自适应高度，可以在内部包裹一个View，对它设置flex布局，同时不设置ScrollView的enable-flex属性