微信小程序开发注意点和坑集
开发（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做兼容）
最新文章
- 《动手实现一个网页加载进度loading》
- Python实现支持并发、断点续传的FTP
- codeforces 349B Color the Fence 贪心，思维
- delphi Tab Item Badge Value 消息数标记
- C#全角转换成半角并检查
- note.js之 Mongodb在Nodejs上的配置及session会话机制的实现
- 关于 Android导出apk时碰到的[Unable to execute dex: Multiple dex files define]
- ios开发之 MPMoviePlayerController 视频播放器
- Xcode7创建纯代码空白工程
- light oj 1153 - Internet Bandwidth【网络流无向图】
- Ext.Net学习笔记02：Ext.Net用法概览
- 转:如何制作一个定制的 PHP 基础 Docker 镜像（一）
- C# StreamReader/StreamWriter与FileStream用法详解
- inline-block布局方式
- 检测android的版本的办法
- node.js系列（实例）：原生node.js实现静态资源管理
- poj 2774 最长公共子串 后缀数组
- REST API disable / enable service auto start by API
- 【原创】大叔经验分享（25）hive通过外部表读写hbase数据
- Going Home POJ - 2195(费用流)