【微信小程序】全局配置

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 选项

完整的配置代码

javascript 复制代码
{
  "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
  }
}
相关推荐
.生产的驴3 小时前
SpringBoot 对接第三方登录 手机号登录 手机号验证 微信小程序登录 结合Redis SaToken
java·spring boot·redis·后端·缓存·微信小程序·maven
汤姆yu9 小时前
基于微信小程序的乡村旅游系统
微信小程序·旅游·乡村旅游
计算机徐师兄9 小时前
基于TP5框架的家具购物小程序的设计与实现【附源码、文档】
小程序·php·家具购物小程序·家具购物微信小程序·家具购物
曲辒净9 小时前
微信小程序实现二维码海报保存分享功能
微信小程序·小程序
朽木成才11 小时前
小程序快速实现大模型聊天机器人
小程序·机器人
peachSoda711 小时前
随手记:小程序使用uni.createVideoContext视频无法触发播放
小程序
何极光11 小时前
uniapp小程序样式穿透
前端·小程序·uni-app
小墨&晓末12 小时前
【PythonGui实战】自动摇号小程序
python·算法·小程序·系统安全
oil欧哟1 天前
🤔认真投入一个月做的小程序,能做成什么样子?有人用吗?
前端·vue.js·微信小程序
汤姆yu1 天前
基于微信小程序的消防隐患在线举报系统
微信小程序·小程序·消防隐患