网页制作工作网站食品网站开发

一、全局配置文件

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项的配置对象