【系】微信小程序云开发实战坚果商城-商城项目搭建_微信小程序云开发写购物

第 2-1 课：商城项目搭建

目录

• 开篇
  • 【系】微信小程序云开发实战坚果商城-开篇
• 基础篇
  • 【系】微信小程序云开发实战坚果商城-弹性盒子
  • 【系】微信小程序云开发实战坚果商城-ES6 简单入门
  • 【系】微信小程序云开发实战坚果商城-官方案例先运行
• 前端篇
  • 【系】微信小程序云开发实战坚果商城-商城项目搭建
  • 【系】微信小程序云开发实战坚果商城-所有目录…

1 准备工作

已经申请小程序，获取小程序 AppID 在小程序管理后台中， 设置的开发设置 下可以获取微信小程序 AppID 。

2 新建项目

这里我们已经不需要官方的模板，将其官方给的图片和模板删除。

项目重命名，文件夹和 project.config.json 对应即可

3 app.json 配置文件修改

修改 app.json 全局的默认窗口配置

"window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "坚果商城",
    "navigationBarTextStyle": "black"
  }
1
2
3
4
5
6
7

自定义 tabBar ，坚果商城目前主要的有首页、分类、购物车、个人中心。在配置 tabBar 首先我们需要新建我们每一个要指向 tabBar 的页面。在 pages 写好页面路径列表 ，保存微信开发者工具自动帮我们生成

  "pages": [
    "pages/index/index",
    "pages/category/category",
    "pages/cart/cart",
    "pages/my/my"
  ],
1
2
3
4
5
6

tabBar 所需要的图片存放 pages/images/tabBar 文件中。

"window": {
   ....
},
"tabBar": {
    "color": "#7F8389",
    "selectedColor": "#FF6200",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/tabBar/home.png",
        "selectedIconPath": "images/tabBar/home@select.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/category/category",
        "iconPath": "images/tabBar/category.png",
        "selectedIconPath": "images/tabBar/category@select.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/cart",
        "iconPath": "images/tabBar/cart.png",
        "selectedIconPath": "images/tabBar/cart@select.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "images/tabBar/my.png",
        "selectedIconPath": "images/tabBar/my@select.png",
        "text": "个人中心"
      }
    ]
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

4 全局样式修改

app.wxss 全局样式

/**app.wxss**/
page{
  width:100%;
  padding: 0;
  margin: 0;
  height: 100%;
  font-family:  "PingFang SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #f2f2f2;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5 运行效果

部署不成功、图片无法显示、数据库无法获取，快速部署坚果商城，欢迎微信搜索「山间木匠」，后台回复关键字「坚果商城」获取最新PDF

源码地址

在搭建项目前，根据自己需要下载本系列文章的源代码

本项目源码地址：https://gitee.com/mtcarpenter/nux-shop