挫折教育：关于小程序开发的那些坑

踩过坑才更加进步，小程序开发的小经验

最近跟着慕课网上的课程在做一个网易云音乐小程序，遇到了一个进度条回跳的 bug，这里记录一下踩坑和解决的过程。

实际行为：在拖拽进度条之后，会首先回跳到拖拽之前的位置，然后再跳到拖拽之后的位置。

页面结构如下，左右两个 text 显示时间就不说了，主要是中间的进度条。这个进度条里面用到了 progress 组件。progress 组件有 max 属性，表示进度条的最大值，value 属性，表示进度条的当前值。

<progress id="progress" max="100" value="0"></progress>

在拖拽进度条的时候，会触发 progress 组件的 change 事件，在这个事件中，我们可以获取到拖拽后的进度条的值，然后把这个值赋值给 progress 组件的 value 属性。

progress.addEventListener('change', (e) => {
  progress.value = e.detail.value;
});

但是，当我把这段代码加到小程序中之后，发现进度条在拖拽之后会回跳到拖拽之前的位置，然后再跳到拖拽之后的位置。

我一开始以为是 progress 组件的问题，查了查文档，发现 progress 组件没有这样的问题。后来，我发现是我在 progress 组件的 change 事件中没有阻止默认行为。

progress.addEventListener('change', (e) => {
  e.preventDefault();
  progress.value = e.detail.value;
});

加上这行代码之后，进度条就不回跳了。

另一个坑是，我在小程序中使用了一个第三方库，这个库有一个函数可以获取当前播放的歌曲的信息。但是，当我使用这个函数的时候，发现它总是返回 undefined。

我查了查这个库的文档，发现这个函数需要在页面加载完成之后才能使用。于是我把这个函数放在了页面的 onLoad 函数中，问题就解决了。

Page({
  onLoad: function () {
    const songInfo = getSongInfo();
    console.log(songInfo);
  },
});

这就是我在小程序开发中遇到的两个坑。希望能够帮助大家在小程序开发中少走弯路，少踩坑。

除了上面提到的两个坑之外，在小程序开发中还有一些其他的注意事项。

• 在小程序中，所有的网络请求都必须使用小程序的内置 API。不能使用 fetch、XMLHttpRequest 等其他方式进行网络请求。
• 在小程序中，所有的文件都必须放在小程序的根目录下。不能把文件放在其他目录下。
• 在小程序中，所有的图片都必须放在小程序的 static 目录下。不能把图片放在其他目录下。
• 在小程序中，所有的视频都必须放在小程序的 video 目录下。不能把视频放在其他目录下。

这些都是小程序开发中需要注意的事项。希望大家在开发小程序的时候能够注意这些事项，避免踩坑。