商城类小程序实战之商城首页实现

## 商城类小程序实战（三）：商城首页的制作

在商城首页的制作中，我们将主要实现三个功能：

* 顶部的导航栏
* 上半部分的轮播图页面
* 下半部分的商品列表推荐页面

为了方便开发，我们先来创建项目。

mkdir mall-app && cd mall-app

然后初始化项目

npm init

安装依赖

npm install uni-app -D

创建 `src` 目录，在里面创建 `pages.json` 文件，代码如下：

{
"pages": [
"pages/home/index"
],
"tabBar": {
"list": [
{
"pagePath": "pages/home/index",
"text": "首页"
}
]
}
}

创建 `pages/home/index.vue` 文件，代码如下：

在 `src` 目录下创建 `data` 目录，在里面创建 `swiper-data.json` 和 `recommend-data.json` 文件，代码如下：

// swiper-data.json
[
{
"image": "https://img.yzcdn.cn/upload_files/2020/12/29/FjODfE_XfOLsg9Oip4LML0lnRwWv.jpg!100x100.jpg"
},
{
"image": "https://img.yzcdn.cn/upload_files/2020/12/29/FhBuxftOOSyWW_vEIMKeSX1rwlA0.jpg!100x100.jpg"
},
{
"image": "https://img.yzcdn.cn/upload_files/2020/12/29/FhBuxftOOSyWW_vEIMKeSX1rwlA0.jpg!100x100.jpg"
}
]

// recommend-data.json
[
{
"image": "https://img.yzcdn.cn/upload_files/2020/12/29/FjODfE_XfOLsg9Oip4LML0lnRwWv.jpg",
"name": "商品名称1",
"price": "10.00"
},
{
"image": "https://img.yzcdn.cn/upload_files/2020/12/29/FhBuxftOOSyWW_vEIMKeSX1rwlA0.jpg",
"name": "商品名称2",
"price": "20.00"
},
{
"image": "https://img.yzcdn.cn/upload_files/2020/12/29/FhBuxftOOSyWW_vEIMKeSX1rwlA0.jpg",
"name": "商品名称3",
"price": "30.00"
}
]

最后，运行项目

npm run serve

即可在浏览器中看到商城首页了。

在本文中，我们向您展示了如何制作商城类小程序的首页。我们引导您完成了整个过程，从创建导航栏和轮播图，到添加商品列表推荐页面。希望本文对您有所帮助。