前言
上一节我们讲了如何利用微信git进行代码管理。这一节我们来讲讲基本的界面配置。
前面说过，小程序实质上就是web网页，一个web网页需要什么东西构成呢？
我们以下面这个web网页为例：
我们把这个网站分解为Head、Tabbar、内容三个部分，这个是一般的网站的构成之一。
然后我们再拿出一张小程序图。
我们可以发现，也可以将其划分为相同的三个部分。
那么我们快开始配置吧！
Tabbar
Tabbar是小程序底部的切换按钮，用于主界面之间的切换。
在 app.json 文件中配置tabbar。
"tabBar": {
"color": "#ff0000", //字体颜色
"selectedColor": "#ffff00", //选中时字体的颜色
"backgroundColor": "#1697eb", //tab背景色
"borderStyle": "black", //tabBar盒子上面的border颜色，只支持black 与 white
"list": [
{
"pagePath": "pages/tabOne/tabOne", //此处路径要写不带 ‘/’的，比如Helloworld文件，我们要写的路径就是 pages/helloworld/helloworld
"text": "首页", //tab名字
"iconPath": "image/icon_API.png", //tab图标
"selectedIconPath": "image/icon_API_HL.png" //选中时的tab图标
},
{
"pagePath": "pages/tabTwo/tabTwo",
"text": "中间页面",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png"
},
{
"pagePath": "pages/tabThree/tabThree",
"text": "第三个页面",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png"
}
],
"position": "bottom", //tabBar的位置 top 或 bottom
"custom": false //自定义tabBar时为true
}:::tip 效果如下：
:::
设置顶部文字
在 app.json 中设置顶部title。
//统一配置Title
"window": {
"backgroundTextStyle": "light",//浅色模式
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "首页",//这里是你要修改的文字
"navigationBarTextStyle": "black"
}
或者在单独页面的 xxx.json 中设置单独页面的title。
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "white",
"navigationBarTextStyle": "black"