小程序中的全局配置以及常用的配置项(window,tabBar)

全局配置文件和常用的配置项

    app.json:

        pages:是一个数组,用于记录当前小程序所有页面的存放路径,可以通过它来创建页面小程序中的全局配置以及常用的配置项(window,tabBar)_第1张图片

        window:全局设置小程序窗口的外观(导航栏,背景,页面的主体)

小程序中的全局配置以及常用的配置项(window,tabBar)_第2张图片

        tabBar:设置小程序底部的 tabBar效果

        style:是否启用最新版的组件样式

小程序中的全局配置以及常用的配置项(window,tabBar)_第3张图片

 

 window配置项

        导航栏的配置:小程序中的全局配置以及常用的配置项(window,tabBar)_第4张图片

      我们可以看到导航栏默认为白色背景黑色字体,我们通过window配置项来修改导航栏的背景为#ff0000(红色),字体颜色为white小程序中的全局配置以及常用的配置项(window,tabBar)_第5张图片

       全局开启下拉刷新的功能:

"enablePullDownRefresh": true

小程序中的全局配置以及常用的配置项(window,tabBar)_第6张图片

         设置下拉背景的颜色和样式:

     "backgroundTextStyle":"dark",
     "backgroundColor": "#efefef"

小程序中的全局配置以及常用的配置项(window,tabBar)_第7张图片

       设置上拉触底的距离(默认50px)

"onReachBottomDistance": 100

 

什么是 tabBar:

        tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换,有底部和顶部的区分,最小要配置2个,最多能配置5个tab页签,顶部的tabBar只会显示文本

tabBar的组成:

 
backgroundColor  背景色 
selectedIconPath 选中时的图片路径
borderStyle 上边框颜色
iconPath 未选中时图片路径
selectedColor 文字选中时候的颜色
color 默认颜色

配置tabBar:

1.创建三个页面,在pages中创建,tabBar的页签必须要放在pages中的前面

    "pages/home/home",
    "pages/msg/msg",
    "pages/contact/contact",

小程序中的全局配置以及常用的配置项(window,tabBar)_第8张图片

 2.创建tabBar,和window同级

  "tabBar": {
    "list": [
      {
      "pagePath": "pages/home/home",
      "text": "首页"
    },
    {
      "pagePath": "pages/msg/msg",
      "text": "消息" 
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系我" 
    }
  ]
  },

小程序中的全局配置以及常用的配置项(window,tabBar)_第9张图片

 

你可能感兴趣的:(小程序,微信小程序,小程序)