uni-app爬坑之旅_开发一个自己的app_day10_分享学习笔记(未进行条件编译导致的报错)

一、未进行条件编译导致的API未生效报错

1.背景介绍

条件编译算是uni-app一个很重要的特性，可以针对不同的平台执行不同的代码，而且uni-app是一套代码多端发布，如果专属于某个平台的API没有写进条件编译里，那么在其他平台运行代码的时候就会报错，今天就遇到了一个报错，原因和未进行条件编译有关

2.报错信息

API 'getMenuButtonBoundingClientRect/' is not yet implemented

3.解决思路

报错信息显示，API getMenuButtonBoundingClientRect 未生效，网上找了一番，才知道问题出在运行平台上，getMenuButtonBoundingClientRect是微信小程序的API，但我运行的环境是H5，在H5端查询不到对应的API，因此报错，所以我们要加上条件编译的代码，进行平台区分，如果不是微信小程序平台，就不执行该代码

4.加上以下代码，进行平台区分，再在H5端运行，报错就消失了

// h5 app mp-alipay不支持微信的方法
// #ifndef H5 || APP-PLUS || MP-ALIPAY
// 获取胶囊位置,API getMenuButtonBoundingClientRect 只有在微信小程序运行的时候才会生效，H5端查看会报错
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
this.windowWidth = menuButtonInfo.left
// #endif