(实践)Node构建小程序SOA

前言

本篇文章用来记录小程序开发的一些痛点和调试问题。

问题

小程序码到小程序的传参

流程:
Node提供带有小程序码的中间页，用户在微信中打开，然后跳转到小程序，小程序拿到参数。

解决方案如下:

Node提供小程序码中间页,获取小程序码

不用关心 wechat 是什么， 我将Node应用做了分层， 具体分层设计可以参考mpvue及koa2全栈开发小程序中的服务端代码，gitHub都写了注释。

这里的wechat 是 一个方法，用来获取和生成小程序码：

1. 首先获取access_token
2. 带着参数和 access_token去请求微信的生成小程序码的接口
3. 获得小程序码的二进制流字符串，转换成base64图片，渲染(pug模板)

小程序接收参数

微信提供的api

因为只有线上的小程序 才可以被 二维码所拉起，所以这里的调试很麻烦，审核 通常要 2个小时以上。
注意：官方文档提供的 query.scene 其实就是options.scene,不要使用options.query.scene
我们的create方法生成的都是 如下图：

通过decodeURIComponent(options.scene)就可以拿到小程序码的传参了。

小程序场景，页面滚动时切换横向滚动tab，双滚动联动

流程:小程序页面中 有2个 滚动，第一个滚动是 横向滚动tabbar，第二个滚动为页面滚动，支持点击tabbar，页面滚动至对应的位置，手动上下滑动页面时，横向tabbar要更新当前切换状态

解决方案如下：

onload中使用小程序api获取dom节点高度，并且存储
横向滚动条使用scroll-view，点击事件，使用wx.scrollTo滚动页面
页面滚动使用onPageScroll监听，判断当前位置(与onload中存储的高度对比判断)，更新横向滚动条 scroll-view的 scroll-to-view 的id值

注意：

在监听页面滚动，并短时间内多次setData，在安卓设备上表现惰性，会有延时表现，效果差。
改为 小程序提供的api，wx.createIntersectionObserver().relativeToViewport().observe，还是有同样问题，我猜测，这个api只是 监听页面滚动，判断位置 的 一个语法糖，并不能避免安卓机器上的性能问题。
所以，如果有类似需求，建议改交互。

小结

未完待续...