小程序码认识、获取与微信识别小程序码的方式

认识小程序码

事件:微信发布小程序,最开始只能通过微信「扫一扫」识别进入特定小程序。2017年4 月 14 号,开放「长按识别二维码」功能,意味着用户使用小程序的便捷程度将大大提高。仅仅过了 4 天,微信又推出了小程序码,支持「扫一扫」和「长按识别扫码」

微信小程序码

从方到圆,从密封到发散,这是二维码到小程序码在图形界面上的变化。此外在功能方面,二维码所有的功能,小程序码同样具备

这种异形二维码并不是微信的首创,Facebook、Snap 等公司都已经推出过类似的异形码:

异形二维码

看来鹅厂也并非只是埋头苦干,而是懂得借力打力的。

小程序码的优点:
  • 观赏性:小程序码与普通二维码相比,看起来更美观
  • 扫码预期:扫码前能明确知道,扫码之后将会体验到一个小程序;
  • 安全性:小程序码目前只能通过微信产生,并且只能通过微信识别,安全性更高;
  • 品牌宣传:每个小程序码右下角都有固定的微信小程序 logo,每见到一次小程序码,大家就能多一次联想到微信小程序;
  • 高容错性:当一张二维码图片中间嵌有某些 logo 图片时,其实相当于是把最中间部分有用的编码信息挖掉,再贴一张 logo 图片上去;而小程序码不同,中间的 logo 区并不包含数据编码的部分,因此小程序码拥有更高的容错性。
很明显,小程序码是更好的选择:)
小程序码一共支持 3 种容量,分别是 36 射线、54 射线和 72 射线。
小程序码3 种容量射线。
每个版本分别对应 L、M、Q、H 这 4 种容错级别:
  • L 级容错的小程序码,大约 10% 的字码可被修正
  • M 级容错的小程序码,大约 15% 的字码可被修正
  • Q 级容错的小程序码,大约 25% 的字码可被修正
  • H 级容错的小程序码,大约 35% 的字码可被修正
不用再究根究底了,问“十万个为什么”,对于应用者来说,这些常识就够了。
小程序码有两个 logo 区域,分别是中间的自定义 logo 区和右下角的官方 logo 区,灰色的区域是小程序码的数据编码区,其它彩色区域是小程序码的功能性数据(主要包括版本、纠错等信息)。
小程序码 logo 区域
嗯,每一种色彩背后,都有自己的意义。

获取小程序码

根据小程序官方开发文档的说明,目前请求生成一个小程序码有两个接口(A 和 B)请求生成小程序二维码有一个接口(C)
这三个接口有什么区别呢?
 
数量限制:接口 A、C 生成的小程序码和二维码加起来不能超过 10w 个,接口 B 生成的小程序码则数量没有限制
 
时效性:接口 A、B、C 生成的小程序码/二维码永久有效
 
页面指定性:接口 A、C 生成的小程序码/二维码可以直接进入指定页面,而接口 B 生成的小程序码需要通过技术开发处理逻辑(通过参数 scene)后才能跳转到其它页面
 
建议大家优先使用 B 接口去生成二维码,一方面是小程序码始终是比二维码可辨认性高,另一方面没有数量限制,而且技术处理也相对简单。
 
关于小程序码的样式,现阶段我们主要可以定义以下方面的内容:
 
  • 小程序码的尺寸
  • 小程序码的射线颜色
  • 自定义 logo 区的图片
 
由于目前我们只能定义小程序码的射线颜色,无法定义整个小程序码图片的背景颜色。
 
所以,在声明小程序码射线的颜色这一步,主要有两种思路:
 
  1. 通过设置 line_color 来决定小程序码射线的颜色,不过这个时候最好是确保射线跟背景色(白色)有一定的对比度,降低扫码成本;
  2. 设置 auto_color 为 true(默认为 false),微信后台会智能根据中间 logo 区域的主色调来确定小程序码射线的颜色。

微信识别小程序码

小程序码识别过程,跟小程序码的生成过程是反过来的,大家可以通过简单的流程图来感受一下。
 小程序码识别过程

虽然,目前小程序暂时不支持直接分享到朋友圈,但是越来越多的小程序已经通过尝试将小程序码与业务功能相结合,生成一张可以在朋友圈传播的小程序码,方便其它用户通过长按识别小程序码直接(从朋友圈)进入相应的小程序。

 长按识别小程序码

 

长按识别二维码(或小程序码)在微信下是一个再自然不过的交互了,既然讲到这里,就顺便跟大家简单聊聊长按识码背后的小故事。微信会根据不同的场景采取不同的识别策略,这里主要分为两类:
 
1. Webview 下长按识别
 
当微信检测到用户长按识别的时候,会第一时间把当前屏幕截屏,然后去检测屏幕截图是否有小程序码(或二维码)。
如果有,则出现长按识别小程序码(或二维码)的菜单项,点击该菜单项即可跳转到对应的小程序码(或二维码对应的内容);反之,如果截图里面没有小程序码(或二维码),又或者小程序码(或二维码)图案不完整,则不会有识别结果。
 Webview 下长按识别

小程序码显示信息不全

小程序码识别信息完整

 

 
2. 图片查看器下长按识别
假设有人在朋友圈发送了一张包含小程序码(或二维码)的图片,你点击预览小图(这时称图片处于图片查看器中),这个时候也是可以长按识别的,那这个时候就是直接发图去识别!(但不一定是原图哦,这里的策略是非常非常多的,例如这张图片非常大,微信就会先做适当压缩再上传去识别的)
 

小程序识别二维码

 
现阶段(2017.8)经过测试发现,在普通场景下,只要微信能长按识别二维码,就也同样能长按识别小程序码;不过在小程序下面,暂时只支持长按识别小程序码哦,长按识别二维码是不支持的。
-------------------------------------

本文的知识要点,摘录于鹅厂美女陈洁婷,腾讯 CDC 的一名前端工程师。

 鹅厂美女陈洁婷

 

相关文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注