基础部分前端部分1准备
你已经申请了小程序小程序商城开发,获取小程序AppID 在小程序管理后台小程序商城开发,可以在开发设置下获取微信小程序AppID。
2 新项目
这里不再需要官方模板,删除官方图片和模板。
重命名项目,文件夹对应project.config.json
3 app.json配置文件修改
修改app.json全局默认窗口配置
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "坚果商城",
"navigationBarTextStyle": "black"
}
自定义tabBar、nut 目前主要的商城有首页、分类、购物车、个人中心。在首先配置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 运行效果
部署不成功 小程序开发商城 ,无法显示图片,无法获取数据库。快速部署 Nutstore。欢迎微信搜索“山中木匠”,后台回复关键词“坚果商城”获取最新PDF
源地址
在搭建项目之前 开发小程序 ,根据自己的需要下载本系列文章的源码
本项目源码地址:
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网