资讯专栏INFORMATION COLUMN

小程序入口构造工具&二维码测试工具

xiguadada / 1617人阅读

摘要:本文将介绍我们小程序中隐藏的两个工具页面。质量入口构造工具提供的链接生成功能和预览功能可以在一定程度上避免发现链接拼接失误等人工疏漏,提高整体交付质量。质量二维码测试工具便于在稳定环境充分测试二维码相关功能,从而提高小程序交付质量。

本文将介绍我们小程序中隐藏的两个工具页面。原理虽不复杂,收益却实实在在,或许也能给诸君带来启发。

入口构造工具 痛点

PM&运营 投放链接
PM&运营每次投放新入口时,都需要找FE要页面链接。投放多少链接就要找FE多少次,一方面相互之间的沟通等待会耗掉不少时间,另一方面询问/回复过程会打断对方手头的工作,影响状态。
关键是大多时候这些链接只是需要改个渠道参数,并不涉及结构上的调整,完全可以由PM/运营自行修改。
然而要向所有PM&运营全面科普url构造规则,并没有想象中容易;各种链接构造需求就这样在无形中不断消耗双方的精力。

FE&QA 开发/测试线下功能
开发/测试没有线上入口的新功能时,经常需要构造一个临时入口供以访问。
可以修改线下接口配置运营位作为访问入口,但是一则运营位有限,二则不能一站式操作;也可以修改代码加个临时入口,但是会污染代码,难保不会带到线上。
这样的情形反复出现也是挺麻烦的。

idea

开发一个专门的入口构造页面,直接提供给PM、运营、FE、QA等各方使用。需要什么链接需要什么入口,直接自助生成,无需一次次反复沟通/构造。

效果

通用入口构造:

如图所示,在入口构造页面中,用户可以直接输入FE提供的url模板并自助修改链接参数,从而获得所需链接。同时支持:

直接打开该链接,进行查看、自测;

生成以该链接作为落地链接的分享卡片,从而以落地页的形式打开查看;

将该链接复制到剪贴板,供以投放;

生成以该链接作为落地链接的二维码,供以投放。

内嵌M页入口构造:

如图所示,内嵌M页的小程序链接构造同样支持类似功能。

实现

需求转译
将链接参数以普通用户能理解的形式展现出来,并允许其直接修改,再配以说明文案。以此抹平url构造规则造成的技术门槛。

入口构造
页内入口 直接以按钮跳转实现,外部入口 以分享卡片进行模拟。

链接输出
使用wx.setClipboardData接口经由剪贴板粘贴使用。

初始入口
生成二维码作为入口构造页面自身的初始入口;将工具页面分享出去,保留分享卡片作为初始入口。

意义

效率

入口构造工具使得PM、运营、FE、QA等各方可以自助、高效地构造所需链接/入口,有效节省了重复沟通成本,并在一定程度上提高了开发、测试、投放效率。

质量

入口构造工具提供的链接生成功能和预览功能可以在一定程度上避免/发现链接拼接失误等人工疏漏,提高整体交付质量。

二维码测试工具 痛点

扫描二维码时会直接进入线上版小程序,导致在开发/测试阶段难以对二维码相关功能进行有效的检测和把控。
早期只能先冒险上线,然后进行线上验证,万一有问题再修复再重新上线,导致二维码相关功能调试效率低、上线风险高。
后来开发者工具支持通过二维码编译,管理后台也支持回滚,相对来说,二维码相关功能可控性强了很多;但是对于QA、PM、运营、第三方接入业务等小伙伴来说,二维码的检查、测试还是很无力。

idea

开发一个专门的二维码测试页面,支持在当前开发版/体验版/线上版小程序中对二维码进行查看和预览。

效果

如图所示,在二维码测试页面中,用户可以:

直接查看二维码的编码信息,包括落地链接、参数等;

在当前开发版/体验版/线上版小程序中打开二维码落地链接;

生成与二维码拥有相同落地链接的当前开发版/体验版/线上版小程序的分享卡片。

实现

查看二维码信息
使用wx.scanCode接口可以读取二维码信息,包括落地页、参数等。

在当前开发版/体验版/线上版中打开二维码
使用wx.scanCode接口获取落地链接,使用wx.navigateTo等接口在当前开发版/体验版/线上版小程序中打开目标页面。

在当前开发版/体验版/线上版中以落地页的形式打开二维码
使用wx.scanCode接口获取落地链接,生成相同落地链接的分享卡片,访问分享卡片以模拟开发版/体验版下扫码打开小程序。

意义

效率
查看二维码信息可以有效提高相关功能调试效率;
直接在当前开发版/体验版中打开二维码可以有效提高相关功能测试效率,特别是对于QA等非前端人员。

质量
二维码测试工具便于QA在稳定环境充分测试二维码相关功能,从而提高小程序交付质量。

值得一提的是,这两个工具都是FE自发思考自发实现的,产出时小伙伴们表示“很惊喜”。
很多时候,主动去思考、发现、分析、解决痛点,能让你贡献出意料之外的价值,共勉。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108515.html

相关文章

  • 解析uni-app和原生程序混合开发的具体实现过程

      在微信小程序开发中用新功能利用uni-app来开发,我们看看都有哪些优缺?  首选我们看看官网给出的解决思路方案  https://uniapp.dcloud.io/hybrid  方式1:把原生小程序转换为uni-app源码。有各种转换工具,详见  方式2:新建一个uni-app项目,把原生小程序的代码变成小程序组件,进而整合到uni-app项目下。uni-app支持使用小程序wxml组件,...

    3403771864 评论0 收藏0
  • VueJS源码学习——项目结构&目录

    摘要:所以整个的核心,就是如何实现这三样东西以上摘自囧克斯博客的一篇文章从版本开始这个时候的项目结构如下源码在里面,为打包编译的代码,为打包后代码放置的位置,为测试代码目录。节点类型摘自资源另一位作者关于源码解析 本项目的源码学习笔记是基于 Vue 1.0.9 版本的也就是最早的 tag 版本,之所以选择这个版本,是因为这个是最原始没有太多功能拓展的版本,有利于更好的看到 Vue 最开始的骨...

    ad6623 评论0 收藏0
  • 新增线下、APP、公众号多处入口程序会再火起来么?(内有福利)

    摘要:之前开发者们追捧小程序的重要原因就是在于认为这可能是下一个微信公众号体量的流量入口,因为大家都想从微信的亿多用户中收获自己的一部分用户。小结来说,还是看好这波能力开放所给小程序生态带来的新用户。 推荐理由:前段时间部分开发者不太看好小程序,认为小程序过于克制,不支持用户留存,也不支持分享到朋友圈,线上二维码等为小程序导流;而这次开放个人开发者注册,还会不会再次点燃开发者们的激情了;今天...

    wangym 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<