微信小程序开发注意点和坑集

开发（Tips）

避开频繁setData *

小程序端对于频繁的逻辑层和显示层的交互很不友好，特别是安卓机，与浏览器上js直接操作DOM不同，小程序通过逻辑更新显示层并不完全实时，开发者应避免出现频繁setData以达到某种视觉效果的操作，如有需要，直接使用框架或页面自带的组件。

组件化开发和分包加载

官方对小程序本身大小的限制为：

▪ 整个小程序所有分包大小不超过 8M

▪ 单个分包/主包大小不能超过 2M

为节省代码和方便团队协作开发，应尽量采用组件化开发方式，业务上更好地解耦协作，考虑控制主包不超过2M大小和优化首页加载速度，应优先使用分包加载。

调试（Tips）

避开请求域名以及 TLS 版本校验

▪ 开发者工具右上角“详情”

▪ 手机端右上角 ··· -> 打开调试

框架（坑）

enablePullDownRefresh

Q：页面开启下拉刷新，下拉刷新时ios会出现页面向上弹一下再回弹的情况。

S：下拉刷新的时候不要同时调用wx.showLoading。

组件（坑）

web-view

Q： web-view组件没有完全覆盖页面，底部留有空隙。

C：造成上面情况的前提是小程序配置有tabBar且小程序的初始页面为tabBar的其中一个tab，后面打开web-view页面时，web-view高度计算为当前页面减去底部tabBar的高度，所以底部留出了tabBar高度的空隙。

S：初始页面为非tab页面再进行跳转到tab页面。

Q：小程序端首次授权拿不到faiOpenid导致卡包中心列表中没有奖品记录。

S : 在小程序里拿到unionid通过参数带到web-view中，再在游戏端做关联逻辑处理。

input

Q：当删除文字时，部分安卓机会监听两次，第一次是空字符串，第二次才是当前文本。

S：对input的监听进行函数防抖操作，如设置300ms的防抖时差，即bindinput获取到input的内容值后300ms内如果没有再触发一次input事件，那么就对当前的值进行下一步操作，从而避开上述的空字符场景。

Q：在小米8上，input组件无法被弹起，特别是fixed悬浮在底部时。

button

Q：无法去除边框

S：添加伪元素样式，代码如下：

button::after{

  border: none; 

}

textarea

A : textarea组件是使用元素组件层级最高，导致在使用是出现各种问题

swiper

A : 将swiper组件当tab导航使用时，在它的内容层级使用swiper-view组件，当点击tab导航时，改 current，触发swiper的 bindchange时，使用setData改变current会导致鬼畜。更改swiper-view为view，判断sourc操作来源，可以在一定程度上解决问题。

接口（坑）

wx.navigateBack

Q：在安卓机下，从页面pageA中navigateTo进入到pageB，在pageB的生命周期函数onLoad或onShow中调用wx.navigateBack会出现小程序直接退出的情况。

S： wx.navigateBack的使用改为在onReady中可一定频率上避免，但不能100%避免，如果真有必要进行以上逻辑，可多做一步setTimeout延时操作。

wx.getUserInfo

A：官方对此接口做了调整：当用户未授权过，调用该接口将直接进入fail回调，而不会再出现授权弹窗，目前体验版和开发版已做此调整，线上暂时没做调整，预计后面会进行过渡调整，后面开发应以新的接口方案做流程，改用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作。

selectorQuery.select

A：通过selectorQuery拿到元素的信息时应注意，对于被撑开的容器，当该容器内部存在独立组件时，所拿到的容器高度不一定准确，推测计算原理是遍历容器内元素，但组件内信息无法直接获取。

wx.setBackgroundColor

Q：在IOS端设置backgroundColor参数有时会失效。

S：在onload生命周期函数中设置可一定程度避免失效，最好是同时设置backgroundColor，backgroundColorTop，backgroundColorBottom。

样式（坑）

transform

A：一些版本的小程序只支持translate和translate3D，对于translateX/Y/Z不支持。

image

Q：设置image为圆角时，加载图片后会先删一下再变成圆角。

C：图片加载后触发页面大面积绘制，页面来不及反应造成渲染掉帧/卡帧。

S：使用GPU加速，代码如下：

image{

    will-change: transform;

}

inline-block

Q：ios下，相邻的两个块用了inline-block，第二个元素位置会比预期的位置要低很多。

S：使用float或者flex或者absolute布局，让此元素变成块。

position : fixed

Q：开启下拉刷新后，ios端fixed元素不会随页面下拉刷新而向下移动，从而挡住了加载样式。

S：在ios端动态设置fixed元素的position，当页面滚动 scrollTop < 0 时，将元素position设为absolute。（已弃用）

S：使用 position : sticky ，该布局相当于 fixed 和 absolute 的结合版，详情见 http://www.css88.com/book/css/properties/positioning/position.htm。（低版本安卓可能不支持该属性值，部分版本因为内核的变换也可能不支持，故要做好兼容处理，可用fixed做兼容）