小程序开发踩坑指南

以下列举了在开发中遇到的一些问题及其解决办法；

如果你遇到的问题不在下列描述中，那可以到微信开发社区发帖求助。

（1）在原生组件上面放个view

小程序组件分为原生组件和非原生组件，原生组件属于客户端的组件，在WebView的渲染流程之外的，且层级在所有非原生组件之上（无论你如何改z-index都没用的）。

因为原生组件的层级最高，如果在原生组件上面放置View呢？

官方提供了cover-view和cover-image，这两个原生组件，解决了图片和文字显示在原生组件上。

但是cover-view只能嵌套cover-view、cover-image和button，其他不行。

（2）camera 在iphone 7 满屏显示，显示不全，下方有黑边？

原因：camera 设置了height:100%；

解决办法：指定height具体值，通过getSystemInfo拿到屏幕高度然后设置给camera；

（3）audio 在iphone 7 播放，有尖刺音？

原因：不明；

解决办法：使用setTimeOut延迟播放；

（4）cover-image在iphone6显示不出图片？

原因：未知。

解决办法：当时发现cover-view有多余的嵌套关系，修改后这个问题就解决了。

（5）cover-view在iphone6、iphone se等手机上显示不出text？

原因：猜测cover-view和flex样式不兼容有关。

解决办法：不使用flex样式即解决。

（6）audio、video切到后台回来重新调用play不生效？

原因：切到后台后微信会自动停止audio、video播放，回来再onShow马上调用play此时组件可能还没准备好，所以就失效了；

解决办法：setTimeOut一下后再调用play即可解决。

（7）原生组件上播动画会卡？

尽量不要这么做，目前解决不了，静等官方解决。

（8）cover-view 文字显示不全，被截断了？

原因：归纳为原生组件之坑吧。

解决办法：设置固定宽度，wxss设置打点处理。

（9）关于如何从页面A跳转到页面B后同时关闭页面A？

乖乖使用wx.redirectTo重定向，会闪一下，没办法。

（10）右边菜单胶囊的高度位置获取不到或者为0？

原因：官方已知bug。

解决办法：使用statusBarHeight或者判断机型使用固定值代替。

（11）摄像头设置了前置，页面跳来跳去后就自动变后置？

原因：固定100%height导致。

解决办法：指定height具体值。

（12）在小程序中使用async和await报错？

1560406368573.png

解决办法：下载FaceBook开源的regenerator-runtime放到小程序里；然后在用到async和await的JS文件里写入这么一行：

import regeneratorRuntime from "../../../libs/runtime";

（13）关于Page跳转带参数是bool（布尔）请注意？

这个布尔值会被转成字符串，请强转或者判断是否是"true"。