第 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"}

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

  "pages": ["pages/index/index","pages/category/category","pages/cart/cart","pages/my/my"],

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": "个人中心"}]}

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;
}

5 运行效果

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

源码地址

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

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

【系】微信小程序云开发实战坚果商城-商城项目搭建相关推荐

【系】微信小程序云开发实战坚果商城-云开发开篇
第 3-2 课:云开发开篇目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信 ...
【系】微信小程序云开发实战坚果商城-开篇
开篇:无服务开发是未来? 目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信小 ...
【系】微信小程序云开发实战坚果商城-扩展篇
第 5-1 课:扩展篇目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系]微信小程 ...
【系】微信小程序云开发实战坚果商城-弹性盒子
第 1-1 课:微信小程序实操弹性盒子目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...
【系】微信小程序云开发实战坚果商城-前端之订单实现
第 2-7 课:前端之订单实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系] ...
【系】微信小程序云开发实战坚果商城-云开发之商品信息和主题商品数据实现
第 3-8 课:云开发之商品信息和主题商品数据实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES ...
【系】微信小程序云开发实战坚果商城-云开发之订单品数据实现
第 3-9 课:云开发之订单品数据实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...
【系】微信小程序云开发实战坚果商城-前后端交互之订单实现
第 4-7 课:前后端交互之订单实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...
【系】微信小程序云开发实战坚果商城-云开发之首页数据实现
第 3-6 课:云开发之首页数据实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...

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

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

目录

1 准备工作

2 新建项目

3 `app.json` 配置文件修改

4 全局样式修改

5 运行效果

源码地址

【系】微信小程序云开发实战坚果商城-商城项目搭建相关推荐

最新文章

热门文章

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

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

目录

1 准备工作

2 新建项目

3 app.json 配置文件修改

4 全局样式修改

5 运行效果

源码地址

【系】微信小程序云开发实战坚果商城-商城项目搭建相关推荐

最新文章

热门文章

3 `app.json` 配置文件修改