微信小程序商城 商城框架的制作
讲解商城小程序首页模块的制作，包含商城框架的制作、顶部普通广告图片、顶部轮播广告、快捷菜单、最新通知、最新产品、精品推荐等元素的制作，最后介绍销售排行的制作。本章主要应用了CSS和Flex Box的知识、小程序前端开发的基础知识。
商城框架
本节开始制作整个小程序商城的框架，主要是底部5个菜单的设置，微信小程序中app.json的设置参见2.2.1节“全局配置”。
准备：5个菜单的默认图片和选中菜单的显示图片，合计10个图片，位于文件夹images里面。底部菜单的设置参见2.2.1节“全局配置中的tabBar”。
app.json的设置代码示例如下：
{"pages":[ <!—小程序里面的页面-->"pages/index/index" ],"window":{<!—小程序的窗体设置-->"backgroundTextStyle":"light","navigationBarBackgroundColor": "#999999","navigationBarTitleText": "小程序购物商城","navigationBarTextStyle":"black"},"tabBar":{<!—-底部菜单-->"list":[{"pagePath":"pages/index/index", <!—页面链接的路径-->"text":"首页", <!—菜单文字-->"iconPath":"images/shou-off.png", <!—菜单图片-->"selectedIconPath":"images/shou-on.png" <!—菜单选中时候显示的图片-->},{"pagePath": "pages/fenlei/index","text": "分类","iconPath": "images/fen-off.png","selectedIconPath": "images/fen-on.png" },{"pagePath":"pages/tmp/gouwuche/01-jianjie","text":"购物车","iconPath":"images/che-off.png","selectedIconPath": "images/che-on.png"},{"pagePath": "pages/huiyuan/index","text": "我的","iconPath": "images/hui-off.png","selectedIconPath": "images/hui-on.png"},{"pagePath": "pages/tmp/index","text": "知识点","iconPath": "images/anli-off.png","selectedIconPath": "images/anli-on.png"} ]}}
效果如图所示。
【微信小程序参考资料】
（1）微信小程序学习路线 /
（2）Java微信小程序商城系统指导 /course/3066521
（3）PHP微信小程序商城系统指导 /course/3066518
（4）微信官方文档 https://developers./miniprogram/dev/framework/
01-微信小程序商城 商城框架的制作（微信小程序商城开发 小程序毕业设计 小程序源代码）（黄菊华-微信小程序开发教程）
