iOS上小程序开发踩的一些坑

        用react写的webview，在适配小程序的时候遇到很多比较麻烦的问题，大多是出在UI上面，导致UI还原度极低；花时间解决之后总结了一下踩得一些坑。

        1.iOS小程序中，部分盒子出现0.5px的边框缺失的问题。

        由网上大家踩的坑总结，当盒子高度为奇数时，更容易出现上下边框的缺失，当宽度为奇数的时候，更容易出现左右边框的缺失。究其本质则是在iOS上，盒子宽高会影响0.5px的取整方向。解决方案主要就是添加伪类，或者scale缩放，我是给有边框的类加上了transform: rotateZ(360deg)，比较方便，基本上解决了问题。

        还有解决方案，比较玄学

border: 1px solid;
border-image: linear-gradient(90deg, rgba(147, 104, 59, 0.1), rgba(179, 141, 91, 1), rgba(197, 161, 109, 0.1)) 1 1;

         按这个顺序，能在原本显示失败的地方展示出边框，具体原因还没搞清楚。

  2.与底部的间距。

        众所周知，在iOS11及以上的设备，iOS系统为了适配底部灵动性，加上了一个小横条。为了适配这个小横条，需要对11以上机型统一做处理。

@media only screen and (device-width: 390px) and (device-height: 844px) 
and (-webkit-device-pixel-ratio: 3)

        可以用上述代码一个个对iOS机型进行适配。但是，需要注意的是，小程序上的webview底部的间距，不单是由webview所定义，还有iOS11以上的机型所带的安全距离。

        另外，在使用position：fixed固定底部按钮位置的时候，需要注意的是父元素的overflow是否一致，因为fixed本质上是相对最近的带滚动条的父元素的位置进行定位。如果连续两个二级页面的overflow不一致，会导致用fixed固定的按钮位置不一致。

        3.图片长按保存的问题

        在小程序上，其实不止iOS会出现图片可以被长按保存或分享的问题，不过这也是遇到的坑，所以记录在一起。解决方案也很简单，给图片加上一个蒙层，将原本的事件绑定到图片外面一层的父元素机壳解决。或者直接给图片加上point-events:none，避免一切图片的事件触发。

        4.iOS弹簧属性，小程序上webview内的页面在iOS设备上可被拖动，出现白顶白底。

        如果需要不被拖动，在较短的页面可以通过固定body和HTML实现。APP上也是同理

/* iOS设备弹簧属性，导致页面整体可被拖动。给body和HTML固定解决。 */
body, html{
    position: fixed;
    top: 0;
    left: 0;
}

       拖动展示的白顶和白底按理来说由小程序开发尝试解决，webview中暂未找到解决方法。

        5.同样不是iOS独有，但是也遇到了，onclick和ontouchend的问题

        onclick在执行顺序上是晚于ontouchend的，也就是说，如果叠加着的元素分别设置了onclick和ontouchend，会使ontouchend的元素消失后，再触发下面的onclick，非常影响滑动的设置。

        可以考虑给element元素加上preventdefault，避免默认事件。

a.addEventListener("click",function(event){
    event.preventDefault();
	location.href = "//www.baidu.com";
});

        或者给事件加上延时，避免触发onclick。

        6.iPhone11Pro颜色丢失的问题

        在正常情况下，给盒子加上背景颜色，盒子里的内容的底色不设置，子元素的底色会继承父元素的颜色。但在iPhone11Pro上，我遇到了一个奇怪的问题，设置了黑色底色的盒子，底色仍然全白。一开始以为是层级问题，被挡住了；反复试验之后发现，层级不影响，解决方案只要给最里面需要的子元素加上颜色，就能正常展示。其他IPhone手机均无复现，考虑是兼容性问题。

        还有两个问题还没找到解决方案，一个是在可滑动区域，iOS设备概率滑动失效，猜测是滑动操作被认为是执行其他的滑动，导致在页面展示失效；另一个是引用地图AMapLoader from '@amap/amap-jsapi-loader'，点击后地图上的marker展示时间极短。