微信小程序：小程序常见问题及解决方案

原生组件显示在遮罩层上面的问题

在小程序中使用原生的表单组件时，在有弹出框出现的情况下，原生表单组件会出现在遮罩层上面，且会造成事件穿透的情况。

解决方案一：

使用cover-view，cover-view比原生组件的层级更高，或者说也是一种原生组件，不过在cover-view的子组件只能是coveri-view、cover-image，对于包含其他组件的弹框并不适用。

解决方案二：

使用page-container，page-container会弹出一个容器，可以承载任意组件。page-container原本是用来实现子页面的，不过用于实现弹框也是可以的。

由于是原本是用来显示子页面的所以在点击返回时可能会出现需要点击两次才会回退到上一个页面的情况，因此，需要自己手动回退一次。

至于事件穿透问题，在遮罩层上使用catch绑定tap、touchmove等事件阻止事件冒泡即可。

scroll-view高度适配问题

布局情况：
scroll-view的上面和下面的高度是固定的，scroll-view与下面部分之间有间隔，要在不同的机型下显示相同的间隔

1. js解决
   使用windowHeight，减去固定部分的高度，剩余的高度为scroll-view的高度。固定部分的高度使用样式中的大小乘以不同机型的rpx的比率得到响应的px大小。

2. css
   scroll-view的父元素设置为flex，absolute定位，设置top、bottom、left、right让父元素占据页面的剩余空间。底部元素也包含进scroll-view的父元素，设置固定高度和间隔。
   设置scroll-viewflex：1，让scroll-view占据父元素中的剩余空间。

表单控件聚焦后页面上推问题

现象：页面上滑导致自定义导航上滑
原因：1. 导航本身就没有加载完毕或者设置样式的时间在显示之后
2. 页面本身的上滑，带动了自定义导航的上滑
解决方法：1. 提前设置样式的时间，或者在多处设置样式2. 禁止页面上滑，使用wx.pageScrolTo({top:0})，在页面的配置文件中设置disableScroll：true。
3. 自定义实现页面上推逻辑，监听表单控件的聚焦事件，聚焦时更改元素的布局属性。

小程序web-view页面返回到小程序页面

背景：web-view中的支付页面，点击支付，跳转到小程序的支付页面，支付后返回到后端返回的web-view的url指定的页面，然后当用户点击返回时，从该页面返回到小程序首页。
解决思路：

1. 使用popstate
   触发popstate的前提：

   1. 显式添加历史记录
   2. 监听popstate事件
   3. 用户交互：移动端为安卓机才需要，ios不需要

popstate在安卓上需要用户交互才能触发，但是项目又不能添加额外的交互，弃用popstate。

2. 使用小程序页面栈进行返回
   思路：保证小程序在支付过程中页面栈中除tabbar页面外只有一个页面。当支付后从返回的页面返回到小程序的页面栈前一个页面，然后重定向到一个统一的页面，从该页面返回时目标页面的from为/，在beforeRouteEnter判断即可。