微信小程序的那些事，微信小程序适合双人玩

小程序以免安装用完即走的特性自发布初就很火即使是现在也是热度不减。小程序虽然是一个 HTML5但是通过限制开发者的写法SEO关键词但是通过限制开发者的写法提供一套自定义的组件以及写法SEO排名服务提供一套自定义的组件以及写法并且将一部分耗费性能的组件使用客户端渲染来极大的提高网页的性能。

前段时间我们也进行了小程序的开发。由于是接手的项目这个项目之前是没有使用框架直接使用原生小程序开发的开发过程中就发现有很多不方便的地方。例如 NPM, Promise 组件化等。最后我对 wepy , tinajs , labrador , mpvue 等多个框架进行了调研最后决定使用 tinajs 对项目进行重构。选择 tinajs 的原因是它是基于小程序的语法并没有多大的改造学习成本非常低。同时它的渐进式概念让我能够循序渐进的接入框架而不是一下子就要把它的所有概念都要学习下来这对当时工期比较紧张的我来说是比较重要的。当然还有一个更重要的原因是它的源码非常的简单即使是出了问题我也能快速定位出来。

我们是一个新闻流的项目用户可以无限下拉加载数据内部会使用一个数组将列表的数据存储起来。当我美滋滋的使用 tinajs 重构完项目后准备试试的时候我就发现当我加载数据超过一定数量限制（大概200条数据）之后控制台就会报“输出传输长度超过最大长度”的错误。

最后查了一下发现是小程序为了性能限制了一次渲染传输的数据量大小。最开始我以为是我的数据超过限制了所以采取了精简不必要字段的办法将数据体积减小。不过在我缩减到不能再缩减的时候发现依旧没什么卵用。后来就想到我的数据真的有这么大么于是乎拿之前原生的测试了一下发现刷到七百多条数据的时候也会提示这个错误。那么就可以证明我之前两百条数据的时候没有超过限制同时我将数据 JSON 化并保存到本地文件里查看了一下发现才150KB左右远远没有达到上限。

最后经过我和 tinajs 作者的逐一分析发现可能是自定义组件的锅。因为我的列表元素有不同的样式SEO排名服务发现可能是自定义组件的锅。因为我的列表元素有不同的样式所以我使用了自定义组件去定义了不同的样式类型组件部分组件又有公共的部分所以又要抽离出来变成组件也就是说实际上我的列表是由一个多层嵌套的自定义组件循环渲染而成的。我们猜测最后小程序渲染的时候每一个自定义组件传入的数据都会做一次拷贝这样就导致了我本来 150K 的数据瞬间就超过了它们的限制。

最后解决的办法也非常简单由于我其实大多数都是纯渲染的组件所以组件内部的自定义组件我都是用 <template> 模板去渲染这种情况下不会触发数据的拷贝试了下就没有问题了。当然除了我说的减少数据体积以及是用自定义模板代替自定义组件减少数据拷贝层级之外我们还可以对 数据进行分页操作 来达到减少一次数据渲染的体积。

我们的小程序有一个下拉刷新的功能小程序自己官方是有封装 onPullDownRefresh 接口来帮助我们完成这个事。不过因为我们的下拉刷新是有自定义样式的所以就没办法使用官方的接口了。最后做出来的效果大概如下所示：

最开始我是使用了 <scroll-view> 组件来做滚动同时使用 scrolltoupper 来触发下拉的事件。内部则是使用了 translate 操作来展开下拉卡片。一顿操作之后觉得甚是完美但是之后突然发现官方提示：

请勿在 scroll-view 中使用 textarea 、 map 、 canvas 、 video 组件

因为这几个组件都是使用 Native 实现的只能是固定在屏幕上的存在所以没办法在 scroll-view 中使用。因为之后可能会在里面加入视频的数据所以对这个组件就有点望而却步。同时使用了这个组件之后外部的其它组件想要修改 scrllTop 的话会变得很麻烦SEO排名服务外部的其它组件想要修改 scrllTop 的话会变得很麻烦都需要自维护一套事件增加了业务的复杂度。

标签： 组件数据程序使用