微信小程序-全局配置

Fade_VV
195 阅读3分钟

1.全局配置文件及常用的配置项

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下

  • 1.pages
    • 记录当前小程序所有页面的存放路径
  • 2.window
    • 全局设置小程序窗口的外观
  • 3.tabBar
    • 设置小程序底部的tabBar效果
  • 4.style
    • 是否启用新版的组件样式

Window

  • 1.小程序窗口的组成部分 image.png
  • 2.了解window节点常用的配置项 image.png
  • 3.设置导航栏的标题
    • 设置步骤：app.json->window->navigationBarTitletext
    • 需求：把导航条的标题，从默认的WeChat修改为自定义文字。 image.png
  • 4.设置导航栏的背景色
    • 设置步骤：app.json->window->navigationBarBackgroundColor

image.png

  • 5.设置导航栏的标题颜色 目前只能是 white和black image.png
  • 6.全局开启下拉刷新功能
    • 概念：下拉刷新是指通过手指在屏幕上的下拉滑动操作，从而重新加载界面数据行为。
    • 设置步骤：app.json->window-> 把 enablePullDownRefresh 的值设置为true. image.png
  • 7.设置下拉刷新时窗口的背景色
    • 当全局开启下拉刷新功能后，默认窗口背景色为白色。如果自定义下拉刷新窗口背景色，设置步骤为： app.json->window->为backgroundColor指定16进制的颜色值#efefef。效果如下

image.png

image.png

  • 8.设置下拉刷新时loading的样式 当全局开启下拉刷新功能之后，默认窗口的loading样式为白色，如果要更改loading样式的效果，设置步骤为：app.json->window->为backgroundTextStyle指定dark值。

image.png

image.png

  • 9.设置上拉触底的距离 概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

image.png 注意：默认距离为50px,如果没有特殊需求，建议使用默认即可。

Tabbar

  • 1.什么是tabBar
    • tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
    • 底部tabBar
    • 顶部tabBar 注意：
    • tabBar中只能配置最少2个、最多5个tab页签
    • 当渲染顶部tabBar时，不显示icon,只显示文本。
  • 2.tabBar的6个组成部分
    • 1.backgroundColor：tabBar的背景色
    • 2.selectedIconPath：选中时的图片路径
    • 3.borderStyle：tabBar上边框的颜色
    • 4.iconPath：未选中时图片的路径
    • 5.selectedColor：tab上的文字选中的颜色
    • 6.color:tab文字的默认（未选中）颜色
  • 3.tabBar 节点的配置项 image.png
  • 4.每个tab项的配置选项 image.png

配置tabbar

  • 1.需求描述

image.png

  • 2.实现步骤
    • 1.拷贝图标资源
    • 2.新建3个对应的tab页面
    • 3.配置tabBar选项
  • 3.步骤

    • 1-拷贝图标资源

      • 1.把资料目录中images文件夹，拷贝到小程序项目根目录中。

      image.png

    • 2-新建对应的tab页面

      • 1.通过app.json文件的pages节点，加速新建4个对应的tab页面,

      image.png

    • 3-配置tabBar选项

      • 1.打开app.json配置文件，和pages、window平级,新增tabBar节点
      • 2.tabBar节点中，新增list数组，这个数组中存放的，是每个tab项的配置对象
      • 3.在list数组中，新增每一个tab项的配置对象。对象中包含属性如下：
      "tabBar": {

    "list": [{

    "pagePath": "pages/equipment/equipment",

    "text": "equipment",

    "iconPath": "/Image/tabs/equipment.png",

    "selectedIconPath": "/Image/tabs/equipment-c.png"

    },

    {

    "pagePath": "pages/plant/plant",

    "text": "plant",

    "iconPath": "/Image/tabs/plant.png",

    "selectedIconPath": "/Image/tabs/plant-c.png"

    },

    {

    "pagePath": "pages/powerplant/powerplant",

    "text": "powerplant",

    "iconPath": "/Image/tabs/powerplant.png",

    "selectedIconPath": "/Image/tabs/powerplant-c.png"

    },

    {

    "pagePath": "pages/stationInfo/stationInfo",

    "text": "stationInfo",

    "iconPath": "/Image/tabs/stationInfo.png",

    "selectedIconPath": "/Image/tabs/stationInfo-c.png"

    }]

    },
avatar
文章
阅读
粉丝