【微信小程序】全局配置

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

在这里插入图片描述

2.window

(1).小程序窗口的组成部分

在这里插入图片描述

(2). 了解 window 节点常用的配置项

在这里插入图片描述

(3). 设置导航栏的标题

在这里插入图片描述
在这里插入图片描述

(4). 设置导航栏的背景色

在这里插入图片描述
在这里插入图片描述

(5). 设置导航栏的标题颜色

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(6). 全局开启下拉刷新功能

在这里插入图片描述

(7). 设置下拉刷新时窗口的背景色

在这里插入图片描述
在这里插入图片描述

(8).设置下拉刷新时 loading 的样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(9).设置上拉触底的距离

在这里插入图片描述

3.tabBar

(1).什么是 tabBar

在这里插入图片描述
在这里插入图片描述

(2).tabBar 的 6 个组成部分

在这里插入图片描述
在这里插入图片描述

(3).tabBar 节点的配置项

在这里插入图片描述

(4).每个 tab 项的配置选项

在这里插入图片描述

4.案例:配置 tabBar

(1).需求描述

在这里插入图片描述
在这里插入图片描述

(2).实现步骤

在这里插入图片描述

步骤1 - 拷贝图标资源

在这里插入图片描述
在这里插入图片描述

步骤2 - 新建 3 个对应的 tab 页面

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

步骤3 - 配置 tabBar 选项

在这里插入图片描述

完整的配置代码

在这里插入图片描述

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window": {
    "navigationBarTextStyle":"black",
    "navigationBarTitleText": "微信小程序",
    "navigationBarBackgroundColor": "#00ffff",
    "backgroundColor": "#eee",
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "light"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",
  "tabBar": {
    "list": [
      {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "images/tabs/home.png", //相对路径
      "selectedIconPath": "images/tabs/home-active.png"
    },
      {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "images/tabs/message.png",
      "selectedIconPath": "images/tabs/message-active.png"
    },
      {
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "images/tabs/contact.png",
      "selectedIconPath": "images/tabs/contact-active.png"
    }
  ],
  "color": "#000000",
  "selectedColor": "#ff0000",
  "backgroundColor": "#eee",
  "position":"bottom", // top或者bottom
  "borderStyle": "white"  // white或者black
  }
}

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值