Skip to main content

微信小程序开发-页面配置

前言​

上一节我们讲了如何利用微信git进行代码管理。这一节我们来讲讲基本的界面配置。
前面说过，小程序实质上就是web网页，一个web网页需要什么东西构成呢？
我们以下面这个web网页为例：
1656491368011.png
我们把这个网站分解为Head、Tabbar、内容三个部分，这个是一般的网站的构成之一。
然后我们再拿出一张小程序图。
1656491523500.png
我们可以发现，也可以将其划分为相同的三个部分。
那么我们快开始配置吧！

Tabbar​

Tabbar是小程序底部的切换按钮，用于主界面之间的切换。
在 app.json 文件中配置tabbar。
image.png 

"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
  }
效果如下：

1656492435503.png

设置顶部文字​

在 app.json 中设置顶部title。 

//统一配置Title
    "window": {
    "backgroundTextStyle": "light",//浅色模式
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "首页",//这里是你要修改的文字
    "navigationBarTextStyle": "black"
  }

image.png

或者在单独页面的 xxx.json 中设置单独页面的title。 

  "navigationBarTitleText": "首页",
  "navigationBarBackgroundColor": "white",
  "navigationBarTextStyle": "black"