微信小程序常见问题

Posted 2020-11-03 wuzhendong

想必写过小程序的大家也都踩过不少坑了,(嗯嗯,真他妈多的坑),在这里呢,我也记录下我遇到过的一些坑。

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 }) }, })