微擎模块开发-微擎小程序商城首页布局详解（前端篇）

微擎小程序首页分为轮播图、分类、商品列表、底部版权四个部分。

商城首页预览图做好后大致是这个样子，一个常规的商城首页布局，下面是详细代码，希望能给大家提供帮助。
小编建议大家在学习布局之前，尽量看两遍“微信小程序开发文档”，这样写起来前端代码更得心应手。

index.wxml文件代码

<view class="container">
	<!-- 轮播图开始 -->
	<view class="banner">
		<swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000">
			<block>
				<swiper-item>
					<image src="http://www.shancloudy.com/attachment/images/2/2020/07/cOio7V77K4VuYRUvkK8Y44usv74Z44.jpg" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image src="http://www.shancloudy.com/attachment/images/2/2020/07/mnbYLlu6096zzY90rnDNU6uXTNNUY0.jpg" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image src="http://www.shancloudy.com/attachment/images/2/2020/07/Dfp4z1P3N934X3kg91X4CdN94NNq93.jpg" mode="widthFix"></image>
				</swiper-item>
			</block>
		</swiper>
	</view>
	<!-- 轮播图结束 -->
	<!-- 首页分类开始 -->
	<view class="category">
		<view class="cate-item">
			<image src="http://www.shancloudy.com/attachment/images/2/2020/07/e4kF34v1S7LMimvS41EMt4LL3SFnVn.png" mode="widthFix"></image>
			<text>首页</text>
		</view>
		<view class="cate-item">
			<image src="http://www.shancloudy.com/attachment/images/2/2020/07/e4kF34v1S7LMimvS41EMt4LL3SFnVn.png" mode="widthFix"></image>
			<text>首页</text>
		</view>
		<view class="cate-item">
			<image src="http://www.shancloudy.com/attachment/images/2/2020/07/e4kF34v1S7LMimvS41EMt4LL3SFnVn.png" mode="widthFix"></image>
			<text>首页</text>
		</view>
		<view class="cate-item">
			<image src="http://www.shancloudy.com/attachment/images/2/2020/07/e4kF34v1S7LMimvS41EMt4LL3SFnVn.png" mode="widthFix"></image>
			<text>首页</text>
		</view>
		<view class="cate-item">
			<image src="http://www.shancloudy.com/attachment/images/2/2020/07/e4kF34v1S7LMimvS41EMt4LL3SFnVn.png" mode="widthFix"></image>
			<text>首页</text>
		<