Skip to content

Latest commit

 

History

History
154 lines (103 loc) · 4.81 KB

微信小程序开发问题.md

File metadata and controls

154 lines (103 loc) · 4.81 KB
Raw

微信小程序开发问题

最近的项目中用到了微信小程序，还是有一些需要注意的点，本文总结一下我在开发微信小程序的过程中遇到的一些问题和解决方法。

语法相关问题

  • 问题一、this指针问题

当我们在网络请求或是定位的回调中使用this时要注意指向问题，否则可能会报错，下面这段代码就是典型的错误代码：

getData: function() {
  wx.request({
    url: 'url',
    success: function(res) {
      that.setData({
        name: res.name
      });
    }
  });
}

运行后会报错TypeError: Cannot read property 'setData' of undefined，原因就是在success回调函数中的this不是指向当前Page对象，因此是找不到setData方法的，不止是setData方法，所有定义在Page中的方法都无法调用。

解决方案

方案一、使用临时变量

getData: function() {
  var that = this;
  wx.request({
    url: 'url',
    success: function(res) {
      that.setData({
        name: res.name
      });
    }
  });
}

方案二、使用箭头函数

request: function() {
  wx.request({
    url: 'url',
    success: (res) => {
      this.setData({
        name: res.name
      });
    }
  });
}

方案三、使用bind

getData: function() {
  wx.request({
    url: 'url',
    success: function(res) {
      this.setData({
        name: res.name
      });
    }.bind(this)
  });
}
  • 问题二、双大括号问题

微信小程序中使用了Mustache语法（双大括号）将变量包起来，实现了数据绑定，有时候“{{}}”并不是必须的，但是需要注意的是，当使用Boolean类型的变量为属性赋值时，比如input等组件的disabled属性，"{{}}"必须要加上，因为直接写 disabled="false"，其计算结果是一个字符串，转成Boolean类型后代表真值，相当于指定为了true，因此不会生效。

  • 问题三、页面间的通信

页面交互问题

  • 问题一、padding改变元素宽高问题

当我们为一个组件指定了宽高之后再设置padding，会发现最后组件的实际宽高和我们设置的宽高不一样，实际宽高要加上设置的padding值。这一点和Android开发中的padding不一样，因此需要注意一下。

  • 问题二、float使父元素塌陷问题

  • 问题三、利用swiper实现标签页切换无法触发上拉和下拉行为问题

  • 问题四、showToast和showLoading问题

在同时使用wx.showToast()和wx.showLoading()时需要注意，如果在wx.showToast()之后调用了wx.hideLoading()会导致Toast框一闪而过，同样地，在wx.showLoading()之后调用wx.hideToast()也会导致Loading框不显示。原因就是因为小程序的内部处理wx.showLoading()和wx.showToast()调用的是同一个框，都受wx.hideToast()或者wx.hideLoading()的影响，因此官方文档中也指出了wx.showLoading和wx.showToast同时只能显示一个。

wx.showToast({
  title: '加载中',
  icon: 'none',
  duration: 5000
});
setTimeout(() => {
  wx.hideLoading();
}, 1000);
// 以上这段代码在真机上会导致Toast在1s后消失，模拟器上没有问题

wx.showLoading({
  title: '加载中'
});
setTimeout(() => {
  wx.hideToast();
}, 1000);
// 以上这段代码在真机上会导致Loading在1s后消失，模拟器上没有问题

经过测试，模拟器上的Toast和Loading显示不会有问题，不过在真机上就会导致上述问题了，因此在实际开发中需要特别注意这一点，尤其是在网络请求中，我们往往会在complete回调中添加wx.hideLoading()来隐藏加载框，此时如果在success或fail回调中调用了wx.showToast()则会导致Toast一闪而过，正确的做法就是在wx.showToast()之前调用wx.hideLoading()来隐藏Loading框。

其他问题

  • 问题三、git推送失败问题

微信开发者工具提供了git的可视化操作界面来简化多人协作进行小程序开发，需要注意当我们在提交代码之前要先从远程库拉取代码，保证当前代码版本与远程库版本一致，否则会导致之后无法进行将本地代码推送到远程库。如果真的因为忘记拉取而遇到了问题，也是有解决方法的，可以通过git命令撤销本地的提交记录：

git reset --soft HEAD^

上述命令可以撤销本地的一次提交记录，不会影响工作区的代码。当然也可以指定撤销的提交次数，~ 后面的数字表示回退几次提交，默认是一次：

git reset --soft HEAD~1

如果在提交代码后又拉取了远程库的代码并进行了合并，执行上面的命令会报错，需要先执行下面这个指令取消合并：

git reset --merge

之后再执行第一个命令就可以了。