一个前端程序猿写微信小程序的踩坑心得

写微信小程序这一个月

最近在做微信小程序的项目，踩了不少坑，不得不吐槽微信小程序的官方文档写得真的不怎么样。一开始技术选型的时候，也考虑过 mpvue、uniapp 等第三方框架，但最后还是决定先了解一下原生小程序，我认为刚开始就上第三方框架并不是很好。

下面我总结了一些踩坑点和开发技巧，希望能给各位初学者一些帮助。

坑点 1：模态框遮挡问题

在开发过程中，我遇到了一个很诡异的问题：当模态框弹出时，它会遮挡住底部的按钮，导致用户无法点击。

this.setData({
  showModal: true
});

起初，我以为这是微信小程序的 bug，但后来发现是因为我使用了绝对定位，导致模态框的层级高于了底部的按钮。解决方法是将模态框的定位改为相对定位。

this.setData({
  showModal: true
});

技巧 1：巧用 setData() 更新状态

在微信小程序中，setData() 函数是一个非常重要的状态管理工具。它可以用来更新小程序的数据，从而触发页面重新渲染。

this.setData({
  count: this.data.count + 1
});

坑点 2：图片加载失败问题

在开发过程中，我还遇到图片加载失败的问题。原因是微信小程序的图片加载机制与浏览器不同，它会对图片进行压缩处理。如果图片太大，就会导致加载失败。

<image src="http://example.com/image.jpg" />

解决方法是将图片大小控制在 1MB 以内，或者使用微信小程序提供的 image 组件。

<image src="{{imageSrc}}" />

技巧 2：使用事件冒泡处理点击事件

在微信小程序中，事件冒泡的机制与浏览器不同。它只会在当前组件内部触发，不会向上冒泡到父组件。

<view @tap="handleTap">
  <button @tap="handleButtonTap">按钮</button>
</view>

解决方法是使用事件代理，将点击事件绑定到父组件上。

<view @tap="handleTap">
  <button @tap.stop="handleButtonTap">按钮</button>
</view>

坑点 3：微信支付回调问题

在开发微信支付功能时，遇到了一个回调问题。当支付成功后，微信小程序会自动跳转到支付成功页面，但是我的回调函数却没有被调用。

wx.requestPayment({
  success: function(res) {
    // 回调函数没有被调用
  }
});

解决方法是使用 complete 回调函数，它会在支付完成（无论成功与否）后被调用。

wx.requestPayment({
  complete: function(res) {
    // 回调函数会被调用
  }
});

技巧 3：合理使用生命周期函数

微信小程序提供了丰富的生命周期函数，可以让我们在小程序的不同阶段执行不同的操作。合理使用生命周期函数，可以提高小程序的性能和稳定性。

// onLoad() 函数在小程序初始化时执行
// onShow() 函数在小程序显示时执行
// onHide() 函数在小程序隐藏时执行
// onUnload() 函数在小程序销毁时执行

通过以上踩坑点和开发技巧的分享，希望能够帮助大家在开发微信小程序时少走弯路，提高开发效率。

---