前言
本篇文章用来记录小程序开发的一些痛点和调试问题。
问题
小程序码到小程序的传参
流程:Node提供带有小程序码的中间页,用户在微信中打开,然后跳转到小程序,小程序拿到参数。
解决方案如下:
Node提供小程序码中间页,获取小程序码
不用关心 wechat 是什么, 我将Node应用做了分层, 具体分层设计可以参考mpvue及koa2全栈开发小程序中的服务端代码,gitHub都写了注释。
这里的wechat 是 一个方法,用来获取和生成小程序码:
- 首先获取access_token
- 带着参数和 access_token去请求微信的生成小程序码的接口
- 获得小程序码的二进制流字符串,转换成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只是 监听页面滚动,判断位置 的 一个语法糖,并不能避免安卓机器上的性能问题。
所以,如果有类似需求,建议改交互。
小结
未完待续...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。