1.新建目录,AppID就不方便展示
2.进入目录删除其他页面文件,保留项目配置文件project.config.json
3.创建app全局组件
6.参考官方文档的框架接口:https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
5.参考官方文档的全局配置:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
5-1.在pages新建三个目录
5-2.编辑全局配置,自动生成home目录下的文件
5-3.三个跳转页面就配置好了
6. 配置tabBar底部栏
6-1.到https://www.easyicon.net/ 网站下载icon图标,配置底部的图标,先创建一个空目录用来存放图片
6-2.由于我提前下载好的图标,查看微信开发工具是否有显示
6-3.设置显示图标和选中图标
app.json
{
"pages":[
"pages/home/home",
"pages/sconend/sconend",
"pages/me/me"
],
"tabBar":{
"list":[
{
"pagePath":"pages/home/home",
"text":"首页",
"iconPath":"images/h1.png",
"selectedIconPath":"images/h2.png"
},
{
"pagePath": "pages/sconend/sconend",
"text": "设置",
"iconPath": "images/s1.png",
"selectedIconPath": "images/s2.png"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "images/m1.png",
"selectedIconPath": "images/m2.png"
}
]
}
}
6-4 .图片大小不能超过40kb(字节),需要压缩图片,压缩图片地址:https://tinypng.com/
6-5.设置底部背景颜色和字体颜色,还有tabbar 上边框的颜色
app.json
{
"pages":[
"pages/home/home",
"pages/sconend/sconend",
"pages/me/me"
],
"tabBar":{
"borderStyle":"white",
"backgroundColor":"#F0FFFF",
"selectedColor":"#000",
"list":[
{
"pagePath":"pages/home/home",
"text":"首页",
"iconPath":"images/h1.png",
"selectedIconPath":"images/h2.png"
},
{
"pagePath": "pages/sconend/sconend",
"text": "设置",
"iconPath": "images/s1.png",
"selectedIconPath": "images/s2.png"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "images/m1.png",
"selectedIconPath": "images/m2.png"
}
]
}
}
7.设置全局默认窗口,配置导航栏
{
"pages":[
"pages/home/home",
"pages/sconend/sconend",
"pages/me/me"
],
"window":{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "小程序"
},
"tabBar":{
"borderStyle":"white",
"backgroundColor":"#F0FFFF",
"selectedColor":"#000",
"list":[
{
"pagePath":"pages/home/home",
"text":"首页",
"iconPath":"images/h1.png",
"selectedIconPath":"images/h2.png"
},
{
"pagePath": "pages/sconend/sconend",
"text": "设置",
"iconPath": "images/s1.png",
"selectedIconPath": "images/s2.png"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "images/m1.png",
"selectedIconPath": "images/m2.png"
}
]
}
}