小程序开发中要避免的坑

小程序避免安装不足的功能自发布以来一直很受欢迎，甚至现在也是如此。尽管小程序是HTML5，但它通过限制开发人员的编写方法、提供一组自定义组件和编写方法，以及对一些性能消耗组件使用客户端渲染，大大提高了网页的性能。

虽然小程序和网页没有太大区别，但难免会遇到陷阱。以下是我在此期间遇到的一些经典问题的解决方案。

遇到的问题

1数据传输长度超过最大长度

在新闻流项目中，用户可以从无限下拉列表加载数据，并且将在内部使用数组来存储列表数据。当我使用Tinajs重建项目并准备尝试时，我发现当我加载的数据超过某个限制（大约200条数据）时，控制台会报告输出传输长度超过最大长度的错误。

形象

2滚动问题

我们的小程序具有下拉刷新功能。小程序本身正式封装了onPullDownRefresh接口，以帮助我们完成此任务。但是，因为我们的下拉刷新具有自定义样式，所以我们不能使用官方界面。

起初，我使用＜scroll view＞Component来滚动。同时，滚动耦合器用于触发下拉事件。在内部，平移操作用于展开下拉卡。过了一会儿，我觉得这很完美，但我突然发现了官方的提示：

形象

因为这些组件是使用本机实现的，只能存在于屏幕上，所以不能在滚动视图中使用。同时使用此组件后，其他外部组件如果要修改scllTop，将变得非常麻烦。他们都需要自己维护一组事件，这增加了业务的复杂性。

3帆布帆布问题

另一个问题是Canvas画布。这个Canvas画布的最大问题是小程序是使用客户端组件在内部实现的，但在开发人员工具中，因为它是网页预览，所以这是HTML＜Canvas＞尽管微信已经实现了大多数HTML原生画布界面，但我想说的是，有很多不同，因此在开发者工具上看到的效果可能与在客户端上看到的完全不同，这给我们的开发过程带来了无尽的障碍。

分解剂

一

在由tina js的作者和我逐一分析后，我们发现这可能是定制组件的锅。因为我的列表元素具有不同的样式，所以我使用自定义组件来定义不同的样式类型组件。有些组件有共同的部分，因此必须提取它们才能成为组件。也就是说，我的列表实际上是由多层嵌套的用户定义组件呈现的。我们猜测，在小程序渲染结束时，每个自定义组件都会复制传入的数据，这会导致我的原始150K数据立即超出它们的限制。

最终的解决方案也非常简单。由于我的大多数组件都是纯渲染组件，所以我使用＜template＞模板用于渲染。在这种情况下，不会触发数据的复制。经过尝试，没有问题。当然，除了通过用自定义模板替换自定义组件来减少数据量和减少数据复制级别之外，我们还可以对数据执行分页操作，以一次性减少数据呈现的量。

二

最后，我返回到正常视图，听取touchstart、touchmove和touchend事件，并根据移动距离确定下拉百分比以实现此功能。最后的实施可以说是极其困难的。然而，在实施之后，又出现了另一个问题。在iOS中，会有阻尼效果。也就是说，当您向下拉时，滚动条将具有回弹的特殊效果。因此，尽管您下拉，但触摸事件无法有效执行。目前，这个问题没有更好的解决方案。在这里，一些用户建议提供一个禁止页面阻尼的参数，但没有官方回应。

三

因为它是客户端渲染的画布，所以小程序的画布具有以下明显特征：

小程序的画布是无限大的。CSS的宽度和高度设置只影响其显示区域，不会绘制图像。也就是说，当您发现元素绘制超出画布并返回后，可以设置画布的CSS宽度和高度以显示画布之外的区域。如果它是HTML中的画布，则不应具有此效果。因此，我们不能同时设置绘制区域和画布大小这两个概念。

因为小程序的画布是由客户端渲染的，所以它总是顶部的，而z索引