爱猪头的程序猿
爱猪头的程序猿

2024年1月19日

1 获取tabBar的高度

在微信小程序中，获取tabBar（微信小程序底部的导航栏）高度可以通过小程序提供的API wx.getSystemInfoSync() 来完成。这个API 可以获取到包括状态栏高度、屏幕高度、窗口高度等信息。tabBar 的高度可以根据这些信息计算得出。 以下是一个获取tabBar高度的示例代码：

// 获取系统信息
const systemInfo = wx.getSystemInfoSync();
// 计算tabBar高度
// 注意：这里的计算方式假设了tabBar在屏幕底部，并且没有其他布局元素干扰。
const tabBarHeight = systemInfo.windowHeight - systemInfo.statusBarHeight;
console.log('tabBar高度为：', tabBarHeight);

这段代码首先通过 wx.getSystemInfoSync() 获取到系统信息，然后计算出tabBar的高度。tabBarHeight 的计算基于窗口高度（systemInfo.windowHeight）减去状态栏高度（systemInfo.statusBarHeight）。 需要注意的是，这种方法依赖于微信小程序的布局和设计，如果小程序的布局中有其他元素占用了底部空间，或者tabBar的位置不是固定的，那么计算出的高度可能不准确。 此外，微信小程序官方文档建议在app.json中使用window字段来定义窗口的statusBarHeight和navigationBarHeight，这样可以在不同设备上获得更好的适配效果。如果小程序中没有自定义tabBar，那么可以放心使用上述方法获取高度。如果小程序中自定义了tabBar，可能需要根据实际布局进行相应的计算调整。

2 uniapp开发常用的api

uniapp 是一个使用 Vue.js 开发所有前端应用的框架，它允许开发者编写一套代码，发布到多个平台，包括微信小程序、H5、App 等。在微信小程序开发中，uniapp 提供了丰富的 API，使得开发者可以方便地实现各种功能。以下是一些在微信小程序开发中常用的 uniapp API：

  1. 网络请求 API：uni.request 用于发起网络请求，支持 GET、POST 等方法。 示例代码：

    uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.log(err);
  }
});

  2. 数据缓存 API：uni.setStorageSync、uni.getStorageSync 用于存储和管理本地数据，类似于原生小程序的 wx.setStorageSync、wx.getStorageSync。 示例代码：

    // 设置缓存
uni.setStorageSync('key', 'value');
// 获取缓存
const value = uni.getStorageSync('key');

  3. 位置服务 API：uni.getLocation 用于获取用户的地理位置信息。 示例代码：

    uni.getLocation({
  type: 'gcj02',
  success: (res) => {
    console.log(res.latitude, res.longitude);
  }
});

  4. 图片和视频 API：uni.chooseImage、uni.previewImage、uni.uploadFile 用于图片选择、预览和上传等操作。 示例代码：

    // 选择图片
uni.chooseImage({
  count: 9,
  success: (res) => {
    console.log(res.tempFiles);
  }
});
// 预览图片
uni.previewImage({
  urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg']
});
// 上传文件
uni.uploadFile({
  url: 'https://api.example.com/upload',
  filePath: 'path/to/file.txt',
  name: 'file',
  success: (res) => {
    console.log(res.data);
  }
});

  5. 界面交互 API：uni.showToast、uni.showModal、uni.redirectTo 等 用于显示提示框、模态框、跳转页面等操作。 示例代码：

    // 显示提示框
uni.showToast({
  title: '成功',
  duration: 2000
});
// 显示模态框
uni.showModal({
  title: '提示',
  content: '这是一个模态框',
  success: (res) => {
    if (res.confirm) {
      console.log('用户点击了确定按钮');
    } else if (res.cancel) {
      console.log('用户点击了取消按钮');
    }
  }
});
// 跳转页面
uni.redirectTo({
  url: 'pages/index/index'
});

  6. 设备信息 API：uni.getSystemInfoSync 用于获取设备系统信息，如屏幕大小、设备类型等。 示例代码：

    const systemInfo = uni.getSystemInfoSync();
console.log(systemInfo.windowWidth, systemInfo.windowHeight);

    这些 API 只是 uniapp 提供的部分功能，开发者可以根据需要查阅官方文档，了解更多的 API 和使用方法。

3 获取tabBar的参数

在微信小程序中，tabBar 是底部导航栏的一部分，它提供了快速切换小程序页面的功能。如果你想要获取tabBar的相关参数，比如颜色、字体大小、背景颜色等，你需要通过小程序的配置文件app.json来获取这些信息。 以下是如何在uniapp中获取tabBar参数的步骤：

  1. 打开你的uniapp项目的配置文件app.json。

  2. 在tabBar对象中，你可以找到color（文字颜色）、selectedColor（选中时的文字颜色）、backgroundColor（背景颜色）等属性。

  3. 你可以根据这些属性来设置你的tabBar的外观。 例如，如果你的app.json中的tabBar部分是这样的：

"tabBar": {
  "color": "#7A7E83",
  "selectedColor": "#3cc51f",
  "backgroundColor": "#ffffff",
  "borderStyle": "black",
  "list": [
    {
      "pagePath": "index/index",
      "text": "首页",
      "iconPath": "resources/home.png",
      "selectedIconPath": "resources/home_active.png"
    },
    {
      "pagePath": "other/other",
      "text": "其他",
      "iconPath": "resources/other.png",
      "selectedIconPath": "resources/other_active.png"
    }
  ]
}

你可以通过以下方式在uniapp的页面中获取这些参数：

// 获取app.json中的tabBar参数
const tabBar = getApp().globalData.tabBar;
// 获取tabBar的颜色
const tabBarColor = tabBar.color;
// 获取tabBar选中时的颜色
const tabBarSelectedColor = tabBar.selectedColor;
// 获取tabBar的背景颜色
const tabBarBackgroundColor = tabBar.backgroundColor;
// 在页面的样式中使用这些颜色
.tab-bar {
  color: {{tabBarColor}}; /* 默认文字颜色 */
  background-color: {{tabBarBackgroundColor}}; /* 默认背景颜色 */
}
.tab-bar-selected {
  color: {{tabBarSelectedColor}}; /* 选中时的文字颜色 */
  background-color: {{tabBarBackgroundColor}}; /* 选中时的背景颜色 */
}

请注意，这里的代码示例是在uniapp的页面样式中使用变量。你需要在页面的