微信小程序开发复盘（一）

开发小程序一年多，其间遇到很多问题，在谷歌和百度的过程中，发现有些博客题目起名，从入坑到弃坑到过程。确实，如果不亲身经历一遍，被小程序各种坑到癫狂，就不能明白，为什么会弃坑。最后，虽然我没有弃坑，但是，也对小程序的有些怨气。最终，只能说，小程序自有有其定位，合理应用和设计，最大限度的发挥出小程序的作用。

如果要很好的设计小程序产品，就要先了解小程序的限制，或者说小程序的坑。

如果要准确的定位小程序产品，还是要了解小程序的坑。

所以，小程序开发复盘系列博客，总结小程序的限制，最后再谈小程序应该怎么定位和设计。

 

小程序挖坑大全

1. 第一坑，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html。解决方案：使用小程序的cover-view和cover-image组件。
2. 第二坑，小程序无法监听和拦截左上角返回事件。解决方案：a、自定义页面header，https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html；b、监听页面的隐藏onHide或卸载onUnload事件。
3. 第三坑，在安卓机上，即使使用了cover-view组件，如果原生组件比cover-view组件先完成渲染，cover-view依然盖不住原生组件。解决方案：延迟cover-view组件的渲染。
4. 第四坑，页面滚动和scroll-view的滑动刷新冲突。解决方案：如果使用scroll-view，则使用bindscrolltolower属性绑定事件。
5. 第五坑，页面高度没有超过手机屏幕高度时，底部会有空白。解决方案：如果页面内容小于一屏，直接设置高度为手机高度，如果页面内容动态变化，则需要监听页面内容的高度，然后动态设置页面高度。
6. 第六坑，小程序button按钮自带边框效果，而且直接设置border无法去掉，需要设置：after的样式。

   .button_gray::after {
     border: none;
   }

    

7. 第七坑，

 

 

 

 

 

参考文档：

1、受制于平台的风险：http://wemedia.ifeng.com/84458626/wemedia.shtml

2、其他问题：https://blog.csdn.net/console__/article/details/82624246