微信小程序--26(全局配置-1)

小程序 0

一、全局配置文件

1.标志

  • app.json

2.配置项

  • pages
            记录当前小程序所有页面的存放路径

  • window
            全局配置小程序窗口配置

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

  • style
            是否启用新版本的组将样式

3.window

  • 导航栏区域
            navigationBar

  • 背景区域
            background

  • 页面主体区域
            用来显示 wxml中的布局

二、window

1.导航栏

  • navigationBarTitleText
            导航栏标题文字内容
  • 步骤:app.json→window→navigationBarTitleText

  • navigationBarBackgroundColor
            导航栏背景颜色
  • 步骤:app.json→window→navigationBarBackgroundColor

  • navigationBarTextStyle
            导航栏表一颜色 黑/白
  • 步骤:app.json→window→navigationBarTextStyle

2.窗口背景

  • backgroundColor
            窗口背景色
  • 步骤:app.json→window→backgroundColor

  • backgroundTextStyle(小圆点)
            下拉loading的样式
  • 步骤:app.json→window→backgroundTextStyle

3.页面效果

  • enablePullDownRefresh
            是否全局开启下拉刷新
            下拉刷新,重新加载页面
  • 步骤:app.json→window→enablePullDownRefresh设置为true

  • onReachBottomDistance
            页面上拉触底事件时距页面底部举例

三、tabBar

1.作用

  • 实现多页面的快速切换

2.类型

  • 底部 tabBar
  • 顶部 tabBar

3.注意点

  • 只能2-5项
  • 顶部只能显示文本
  • 在pages处tabBar页面必须在前面

4.组成

  • backgroundColor
            tabBar的背景颜色

  • selectedIconPath
            选中图片路径

  • borderStyle
            tabBar上边框的颜色

  • iconPath
            未选中图片路径

  • selectedColor
            选择文字的颜色

  • color
            未选择文字的颜色

5.配置选项

  • pagePath
            页面路径

  • text
           tab上显示的文字

  • iconPath
            选中图片路径

  • selectedIconPath
            选中图片路径

6.练习

  • 1.拷贝图标资源

  • 2.新建3个对应的tab页面

  • 3.配置tabBar选项
            app.json中新增tabBar节点
            在tabBar中新增list数组
            配置tab项的配置对象

也许您对下面的内容还感兴趣: