小程序常用组件有以下六个：
- view 组件
- swiper 和 swiper-iem 组件
- image 组件
- text 组件
- navigator 组件
- scroll-view 组件
在学习完这六个组件后，会继续学习字体图标，字体图标在小程序开发中每个项目基本都是使用到；下面我们使用上面六个组件和字体图标实现项目首页的效果：
如上图，在顶部导航条下面是一个轮播图，轮播图下面是公司信息，公司信息下面是商品导航，当点击之后能够跳转，最底部是一个商品推荐，能够进行左右滑动；
接下来打开微信开发者工具，切换到首页目录，对应 index 文件夹，将该文件夹的 index.wxml 和 index.wxss 的默认代码删除；在 index.wxml 中划分四个区域，对应上图中的四个区域，我们可以使用四个 view，如下图所示：
接下来添加一下背景颜色，打开左上侧的调试器：
可以发现四个 view 被一个 page 包围，这个 page 组件我们并没有写，是微信小程序自带的一个组件，page 会包裹所有的组件；我们首先给 page 设置高度，并设置一个背景颜色，打开 index.wxss（可以修改后缀为 .scss），如下图：
到这里，我们就已经把首页划分为四个区域，同时给首页设置了一个背景颜色；
参考视频：尚硅谷微信小程序开发教程