## 1我想自定义navBar导航

在根目录下, 找到 app.json 中window 书写 “navigationStyle”: “custom”
表示顶部导航,我想自定义
image.png

原始效果图: 添加后的效果图
image.pngimage.png

## 2修改

首先在根的app.js 文件中 onLaunch: function () {} 函数里去设置
wx.getSystemInfo({}) //获取设备信息
globalData 这个是全局的,类似于页面的data 的数据

首先，需要区分globalData和data，data是定义在页面中的初始化数据，globalData是定义在app.js中的全局数据，类似于页面中的data

1. data

data是页面第一次渲染使用的初始数据，页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。

2. globalData

app.js中定义、获取、修改globalData：

  1. //app.js
  2. App({
  3.   onLaunch: function () {
  4.     // 首先获取一些设备的信息
  5.     wx.getSystemInfo({
  6.       success: (result) => {
  7.         console.log(result);//输出相关的命令   //375px *2 =750rpx
  8.         this.globalData.height = result.statusBarHeight; //这里获取了高度
  9.       }, 
  10.     })
  12.   },
  13.   globalData: {  
  14.     userInfo: null,
  15.     height:0     //这个是自定义的
  16.   }
  17. })

在其他page.js页面读取以及修改globalData：

  1. var app = getApp(); //首先需要在应用的页面js文件中，引用app()实例
  2. Page({
  3. onLoad: function() {
  4. console.log(app.globalData.name); //获取
  5. getApp().globalData.name = "王二麻子"; //修改
  6. getApp().globalData.favorite = "集邮"; //可以直接增加键值
  7. }
  8. })

在页面的index.js文件

  1. //index.js
  2. //获取应用实例
  3. const app = getApp()
  5. Page({
  6.   data: {
  7.     height:app.globalData.height*2+90,
  9.   },

## 3使用

在wxml 页面中调用

  1. <view class="navBar" style="height:{{height}}rpx">

image.png