微信开发者工具uni-app popup 弹不出来?

2,776 阅读2分钟

如题,近期开始使用uni-app开发小程序,过程中虽然也遇到不少问题,但是popup在开发者工具不会弹出这个问题着实恶心到我了,开发者工具出不来,预览或者真机调试正常,来来回回下不同版本插件,升级开发者工具都不能完全解决这个问题,目前找到个折中方案

省流:

微信开发者工具(两个方法都可以解决):

  • 切换基础库
  • 删除uni-transition包重新导入

支付宝开发者工具:

  • 删除uni-transition包重新导入

- popup version

image.png

- 原因

具体原因可能是在开发者工具中poput包裹内容没有传进popup组件的slot中,故经常报slot空 (我猜的,看了源码表示看不出什么问题)

image.png

- 解决方案

  1. 弹窗出不来了就去切一下基础库,随便切,本人实测基本切完弹窗都能出来

    最新发现直接基础库切低一点就不会有啥问题了,比如最新的是2.25.0 , 我用2.16.0弹窗就很稳定

    image.png

  2. 删除components中的uni-popup插件或者uni-translate插件,用hbuilder重新导入

    这个比较麻烦,效果也不好,也可能重新下了包还是出不来

  3. 重启开发者工具,这个是百度出来的方案,但是我一次都没成功过

- popup的坑

  1. 底部安全区域背景色,默认为透明 , 修改颜色可以使用 background-color="#fff"

image.png

image.png

  1. 坑爹问题: 修改背景色会导致popup内部元素圆角被遮盖
  • 原因

如图,将背景色调整为绿色之后可以看到圆角后面还有绿色区域,假如我们popup背景色跟内容区域颜色一样,弹窗内容区域背景色和popup背景就会重合 , 最后看起来就像圆角失效了

image.png

  • 解决方案

具体调试过程就不多解释了,必须修改popup源码两个地方才能实现(这里我这边小程序popup样式统一了,可以直接源码里面改)

  1. 修改uin-popup bg 相关样式

下图代码在uin-popup 29行 image.png

  1. 修改bottom函数的transClass , 这个style用于主要在这里起作用

image.png

image.png