【系】⼩程序云开发实战坚果商城-商城项⽬搭建第 2-1 课：商城项⽬搭建
⽬录
开篇
基础篇
前端篇
1 准备⼯作
已经申请⼩程序，获取⼩程序 AppID 在中， 设置的开发设置 下可以获取⼩程序 AppID 。
2 新建项⽬
这⾥我们已经不需要官⽅的模板，将其官⽅给的图⽚和模板删除。
项⽬重命名，⽂件夹和 fig.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": {selectediconpath什么意思
....
},
"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-ser if;
background-color: #f2f2f2;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
5 运⾏效果
部署不成功、图⽚⽆法显⽰、数据库⽆法获取，快速部署坚果商城，欢迎搜索「⼭间⽊匠」，后台回复关键字「坚果商城」获取最新PDF
源码地址
在搭建项⽬前，根据⾃⼰需要下载本系列⽂章的源代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。