前言

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

问题

小程序码到小程序的传参

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

解决方案如下:

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

clipboard.png

clipboard.png

clipboard.png

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

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

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

小程序接收参数

微信提供的api

clipboard.png

clipboard.png

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

clipboard.png
通过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只是 监听页面滚动,判断位置 的 一个语法糖,并不能避免安卓机器上的性能问题。
所以,如果有类似需求,建议改交互。

小结

未完待续...


ThenMorning
190 声望18 粉丝

但行好事,莫问前程.