想必写过小程序的大家也都踩过不少坑了,(嗯嗯,真他妈多的坑),在这里呢,我也记录下我遇到过的一些坑。
1. map地图组件在移动视野结束后获取了两次数据
//视野发生变化 regionchange: function (e) { var that = this wx.showNavigationBarLoading() if (e.type == ‘end‘) { that.getLngLat() } }, //视野发生变化后获取当前中间点的经纬度 getLngLat: function () { var that = this this.mapCtx.getCenterLocation({ success: function (res) { var curLongitude = res.longitude var curLatitude = res.latitude var data = { longitude: curLongitude, latitude: curLatitude } util.commonAjax(‘方法名‘, 2, data) .then(function (resolve) { if (resolve.statusCode == ‘200‘) { console.log(resolve.data) that.setData({ //获取当前经纬度并存入data longitude: longitude, latitude: latitude, getNewMarkers: resolve.data.housingPositions }) wx.hideNavigationBarLoading() console.log(‘触发了‘) } }) } }) } e.type == ‘end‘的意思就是在移动视野结束后触发函数,在微信开发工具移动视野后,确实只触发了一次,然而远程真机调试时函数触发了两次,并出现地图多次来回抖动。（妈耶,当时就懵逼了）
当然,最后问题解决了,只是不将移动后获取的经纬度传入data。这个最大的坑就是,工具触发一次,真机触发两次,还以为是手机的问题,于是各种苹果、安卓一顿扫,不出意外的都触发两次,根本找不到原因在哪。
2. textarea多行输入框组件层级最高,导致一些页面无法实现
textarea组件的坑太多,我一般是能不用就不用,谁用谁痛苦。
1. bug: 微信版本 6.3.30，textarea 在列表渲染时，新增加的 textarea 在自动聚焦时的位置计算错误。 2. tip: textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的bindsubmit。 3. tip: 不建议在多行文本上对用户的输入进行修改，所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。 4. tip: textarea 组件是由客户端创建的原生组件，它的层级是最高的。 5. tip: 请勿在 scroll-view 中使用 textarea 组件。 6. tip: css 动画对 textarea 组件无效。 textarea组件的层级是最高的,所以有些页面就不是很好实现。
当然,我这里显示没问题,因为我已经处理过了。而这里的问题其实是textarea的文本内容会出现在你的侧边栏里,非常霸道….
处理办法: 在显示侧边栏的时候,隐藏textarea组件,获取其中的文本,传给一个‘‘标签,使其视觉上效果一样,隐藏侧边栏时,显示textarea组件,将‘‘标签隐藏,堪称完美。
Page({ data: { showTextarea: true, //是否显示textarea组件 }, //点击显示侧边栏 translateX: function () { this.setData({ showTextarea: false }) }, //点击阴影 maskClick: function () { this.setData({ showTextarea: true }) }, })