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

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

入口构造工具

痛点

  • 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自发思考自发实现的,产出时小伙伴们表示“很惊喜”。
很多时候,主动去思考、发现、分析、解决痛点,能让你贡献出意料之外的价值,共勉。

小程序入口构造工具&二维码测试工具的更多相关文章

  1. 微信小程序动态生成保存二维码

    起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...

  2. 重磅消息:微信小程序支持长按二维码进入

    之前微信小程序一般通过以下入口进入: 而用户经常使用“长按二维码”识别应用的功能一直未开放,据酷客多了解,微信安卓6.5.6内测版已经支持长按二维码识别和进入小程序,意味着把小程序二维码分享给朋友,或 ...

  3. 微信小程序 空白页重定向---二维码扫描第二次进入 不经过onLoad过程解析scene参数,跳转问题

    在刚开始的时候将小程序的入口文件直接指向tabbar 的首页,此时出现问题:二维码扫描,第一次不关闭首页,第二次进入时:不会经过onLoad过程解析scene参数: 官方中解释:tabbar跳转方式触 ...

  4. 微信小程序之生成图片分享 二维码分享 canvas绘制

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 添加画布 首先,在小程序里进行绘图操作需要用到<canvas>组件,步骤大致分为以 ...

  5. 微信小程序(4)--二维码窗口

    微信小程序二维码窗口: <view class="btn" bindtap="powerDrawer" data-statu="open&quo ...

  6. 微信小程序-携带参数的二维码条形码生成

    demo文件目录 index.js文件 //index.js var wxbarcode = require('../../utils/index.js'); Page({ data: { code: ...

  7. vue项目条形码和二维码生成工具试用

    项目开发需要,优惠券分不同类型,简单的使用id生成条形码供店铺使用,麻烦点的需要多个字段的就需要使用二维码来展示了,对应的效果如下 条形码(一维码)使用工具code128 需引入code128.js ...

  8. ZBar 是款桌面电脑用条形码/二维码扫描工具

    ZBar 是款桌面电脑用条形码/二维码扫描工具 windows平台python 2.7环境编译安装zbar   最近一个项目需要识别二维码,找来找去找到了zbar和zxing,中间越过无数坑,总算基本 ...

  9. 二维码生成工具类java版

    注意:这里我不提供所需jar包的路径,我会把所有引用的jar包显示出来,大家自行Google package com.net.util; import java.awt.BasicStroke; im ...

随机推荐

  1. 团队项目Alpha冲刺阶段之学习总结

    线性布局 线性布局是程序中最常见的种布局方式,可以分为水平线性布局和重直线性布局两种,通过Android:orientation属性可以设置线性布局的方向.线性布局的特点是各个子元法彼此连接,中间不留 ...

  2. 自己搭建git服务器

    1.安装git 2.创建git用户,给权限(git目录下) 3.设置公钥 4.初始化git仓库 5.给权限(仓库) 连接到本地

  3. 感觉还是要学点c才牛逼

    2019-04-06 $gcc -o hello hello.c  //-o选项用来指定输出文件的文件名. gcc *.c -o hello  //使用通配符编译当前目录下的所有c文件 $ gcc - ...

  4. 离线eclipse添加web工程

    下载了eclipse,先写的后台程序,后来写前台程序的时候发现没有 新建->web dynamic project,如下方式添加: 帮助->安装新软件,在work with中选择版本对应的 ...

  5. W7500S2E串口转以太网

    概述 W7500S2E是一系列串口转以太网模块,支持TCP Server.TCP Client和UDP三种工作模式,串口波特率最高可达460,800bps,并提供配套的上位机配置软件,也可通过网页或A ...

  6. ERC20数字货币ProxyOverflow存在漏洞

    ERC20的ProxyOverflow漏洞造成影响广泛,本文将对其攻击方法进行分析,以便于智能合约发布者提高自身代码安全性以及其他研究人员进行测试.本文选择传播广泛.影响恶劣的SMT漏洞(CVE-20 ...

  7. CODEFORCES ROUND #761 ANALYSES BY TEAM:RED & BLACK

    A. Dasha and Stairs Problems: 一个按照1,2,3……编号的楼梯,给定踩过的编号为奇数奇数和偶数的楼梯数量a和b,问是否可以有区间[l, r]符合奇数编号有a个,偶数编号有 ...

  8. 迭代加深搜索 C++解题报告 :[SCOI2005]骑士精神

    题目 此题根据题目可知是迭代加深搜索. 首先应该枚举空格的位置,让空格像一个马一样移动. 但迭代加深搜索之后时间复杂度还是非常的高,根本过不了题. 感觉也想不出什么减枝,于是便要用到了乐观估计函数(O ...

  9. 使用electron开发指静脉客户端遇到的问题总结

    使用electron 使用nodejs 的ffi模块调用dll文件 总结1.electron 与nodejs版本不需要一致,甚至nodejs版本应该高于electron的node版本2.要安装 Vis ...

  10. C++动态库的几点认识

    1.动态库也有lib文件,称为导入库,一般大小只有几k: 2.动态库有静态调用和动态调用两种方式: 静态调用:使用.h和.lib文件 动态调用: 先LoadLibrary,再GetProcAddres ...