小程序入口构造工具&二维码测试工具
小程序入口构造工具&二维码测试工具
本文将介绍我们小程序中隐藏的两个工具页面。原理虽不复杂,收益却实实在在,或许也能给诸君带来启发。
入口构造工具
痛点
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自发思考自发实现的,产出时小伙伴们表示“很惊喜”。
很多时候,主动去思考、发现、分析、解决痛点,能让你贡献出意料之外的价值,共勉。
小程序入口构造工具&二维码测试工具的更多相关文章
- 微信小程序动态生成保存二维码
起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...
- 重磅消息:微信小程序支持长按二维码进入
之前微信小程序一般通过以下入口进入: 而用户经常使用“长按二维码”识别应用的功能一直未开放,据酷客多了解,微信安卓6.5.6内测版已经支持长按二维码识别和进入小程序,意味着把小程序二维码分享给朋友,或 ...
- 微信小程序 空白页重定向---二维码扫描第二次进入 不经过onLoad过程解析scene参数,跳转问题
在刚开始的时候将小程序的入口文件直接指向tabbar 的首页,此时出现问题:二维码扫描,第一次不关闭首页,第二次进入时:不会经过onLoad过程解析scene参数: 官方中解释:tabbar跳转方式触 ...
- 微信小程序之生成图片分享 二维码分享 canvas绘制
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 添加画布 首先,在小程序里进行绘图操作需要用到<canvas>组件,步骤大致分为以 ...
- 微信小程序(4)--二维码窗口
微信小程序二维码窗口: <view class="btn" bindtap="powerDrawer" data-statu="open&quo ...
- 微信小程序-携带参数的二维码条形码生成
demo文件目录 index.js文件 //index.js var wxbarcode = require('../../utils/index.js'); Page({ data: { code: ...
- vue项目条形码和二维码生成工具试用
项目开发需要,优惠券分不同类型,简单的使用id生成条形码供店铺使用,麻烦点的需要多个字段的就需要使用二维码来展示了,对应的效果如下 条形码(一维码)使用工具code128 需引入code128.js ...
- ZBar 是款桌面电脑用条形码/二维码扫描工具
ZBar 是款桌面电脑用条形码/二维码扫描工具 windows平台python 2.7环境编译安装zbar 最近一个项目需要识别二维码,找来找去找到了zbar和zxing,中间越过无数坑,总算基本 ...
- 二维码生成工具类java版
注意:这里我不提供所需jar包的路径,我会把所有引用的jar包显示出来,大家自行Google package com.net.util; import java.awt.BasicStroke; im ...
随机推荐
- Python之路(第三十九篇)管道、进程间数据共享Manager
一.管道 概念 管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它还允许无亲缘关系进程间的通信. 先画一幅图帮助大家理解下管道的基本原理 现有2个 ...
- SQLPrompt 安装后sql上看不到菜单
解决方案很简单,请使用管理员权限安装 破解也是一样,需要管理员权限运行
- 单点登录的三种实现方式 转自: https://blog.csdn.net/python_tty/article/details/53113612
单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任.单点登录在大型网站里使用得 ...
- Python3.7 Scrapy crawl 运行出错解决方法
安装的是Python3.7,装上依赖包和scrapy后运行爬虫命令出错 File "D:\Python37\lib\site-packages\scrapy\extensions\telne ...
- 图解HTTP第四章
:返回结果的 HTTP 状态码 1>状态码告知从服务器端返回的请求结果 状态码如 200 OK,以 3 位数字和原因短语组成 数字中的第一位指定了响应类别,后两位无分类 2XX 成功常用的状态码 ...
- xbee3的先进性功能用法
xbee3以及xbee3 PRO 是digi无线模块的又一大突破:不仅实现了所有2.4G的模块整合,更在以后的程序更新中会增加蓝牙功能:它打通了xbee系列1和系列2之间的壁垒:不同于xbee S2C ...
- 《MySQL必知必会》官方提供的数据库和表
数据用于配合<MySQL必知必会>(MySQL Crash Course)这本书使用,配套SQL文件也可在Ben Forta网站下载. Ben Forta网址:http://forta.c ...
- jquery购物车计算总价
//计算总价 function cartTotal(){ var total = 0; //循环计算的列,选中计算的数量和价格 //accAdd为精BigDecimal准计算方法 $.each($(& ...
- openmp入门总结
Ref: https://wdxtub.com/2016/03/20/openmp-guide/ 简介 这门课作为 ECE 中少有的跟计算机科学相关的课,自然是必上不可.不过无论是 OpenMP 还是 ...
- STM32CubeMX HAL库串口+DMA数据发送不定长度数据接收
参考资料:1.ST HAL库官网资料 2.https://blog.csdn.net/u014470361/article/details/79206352#comments 一.STM32CubeM ...