【微信小程序】全局配置

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
  }
}
相关推荐
阿里巴巴AI编程社区13 小时前
用Qoder打造自己的AI工作台,普通人也可10倍提效!
微信小程序
星光一影19 小时前
美容/心理咨询/问诊/法律咨询/牙医预约/线上线下预约/牙医行业通用医疗预约咨询小程序
mysql·小程序·vue·php·uniapp
游戏开发爱好者820 小时前
H5 混合应用加密 Web 资源暴露到 IPA 层防护的完整技术方案
android·前端·ios·小程序·uni-app·iphone·webview
wangpq20 小时前
记录曾经打开半屏小程序遇到的事
前端·微信小程序
2501_9151063221 小时前
最新版本iOS系统设备管理功能全面指南
android·macos·ios·小程序·uni-app·cocoa·iphone
游戏开发爱好者821 小时前
HTTPS DDoS 排查 异常流量到抓包分析
网络协议·ios·小程序·https·uni-app·iphone·ddos
jay神21 小时前
【原创】基于小程序的图书馆座位预约系统
微信小程序·小程序·毕业设计·图书馆自习室座位预约系统·座位预约系统
计算机徐师兄21 小时前
Java基于微信小程序的物流管理系统【附源码、文档说明】
java·微信小程序·物流管理系统·java物流管理系统小程序·物流管理系统小程序·物流管理系统微信小程序·java物流管理系统微信小程序
一点晖光1 天前
小程序中web-view加载uni-app H5如何使用postMessage方法的解决方案
前端·小程序·uni-app
2501_915918411 天前
iOS 性能监控 运行时指标与系统行为的多工具协同方案
android·macos·ios·小程序·uni-app·cocoa·iphone