一、未进行条件编译导致的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