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

深碍√TFBOYSˉ_ 2022-04-03 09:07 482阅读 0赞

## 认识小程序码 ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 1][]

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

**小程序码的优点：**

*  **观赏性**：小程序码与普通二维码相比，看起来更**美观**；
 *  **扫码预期**：扫码前能明确知道，扫码之后将会体验到一个小程序；
 *  **安全性**：小程序码目前只能通过微信产生，并且只能通过微信识别，安全性更高；
 *  **品牌宣传**：每个小程序码右下角都有固定的[微信小程序][Link 1] logo，每见到一次小程序码，大家就能多一次联想到微信小程序；
 *  **高容错性**：当一张二维码图片中间嵌有某些 logo 图片时，其实相当于是把最中间部分有用的编码信息挖掉，再贴一张 logo 图片上去；而小程序码不同，**中间的 logo 区并不包含数据编码的部分，因此小程序码拥有更高的容错性。**

**很明显，小程序码是更好的选择：）**

**小程序码一共支持 3 种容量**，分别是 36 射线、54 射线和 72 射线。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 2][]

**每个版本分别对应 L、M、Q、H 这 4 种容错级别：**

*  L 级容错的小程序码，大约 10% 的字码可被修正
 *  M 级容错的小程序码，大约 15% 的字码可被修正
 *  Q 级容错的小程序码，大约 25% 的字码可被修正
 *  H 级容错的小程序码，大约 35% 的字码可被修正

不用再究根究底了，问“十万个为什么”，对于应用者来说，这些常识就够了。

**小程序码有两个 logo 区域**，分别是中间的自定义 logo 区和右下角的官方 logo 区，灰色的区域是小程序码的数据编码区，其它彩色区域是小程序码的功能性数据（主要包括版本、纠错等信息）。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 3][]

嗯，每一种色彩背后，都有自己的意义。

## **获取小程序码** ##

根据小程序官方开发文档的说明，目前**请求生成一个小程序码有两个接口（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 区域的主色调来确定小程序码射线的颜色。

## **微信识别小程序码** ##

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 4][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 5][]

**长按识别二维码（或小程序码）在微信下是一个再自然不过的交互**了，既然讲到这里，就顺便跟大家简单聊聊长按识码背后的小故事。**微信会根据不同的场景采取不同的识别策略**，这里主要分为两类：

**1. Webview 下长按识别**

当微信检测到用户长按识别的时候，会第一时间把当前屏幕截屏，然后去检测屏幕截图是否有小程序码（或二维码）。

如果有，则出现长按识别小程序码（或二维码）的菜单项，点击该菜单项即可跳转到对应的小程序码（或二维码对应的内容）；反之，如果截图里面没有小程序码（或二维码），又或者小程序码（或二维码）图案不完整，则不会有识别结果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 7][]

**2. 图片查看器下长按识别**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 8][]

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

本文转自：[http://www.xiaoyunhua.com/1772.html][http_www.xiaoyunhua.com_1772.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70]: /images/20220403/2e137dcf49a341bfa1ad2cfcd90cfa0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 1]: /images/20220403/b2d65afcc43544df893fb33c18be0c5a.png
[Link 1]: http://www.xiaoyunhua.com/tag/wxxcx
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 2]: /images/20220403/35fbc6b6a7b64fe6a97f32ef0c867ab6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 3]: /images/20220403/95fd1c333aa34e9d8927cf4ea23e5ec8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 4]: /images/20220403/ef767333863f4c509e5c4794a7ded6fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 5]: /images/20220403/367e94a7016e43dd96f696c20d41aec2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 6]: /images/20220403/95b1f0049349441cae5b6e9b2170570a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 7]: /images/20220403/0d060b19cc3e452f81534c8f06c3a0f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpbGxlcjAwMDc3Nw_size_16_color_FFFFFF_t_70 8]: /images/20220403/3c6a01b9ea92489c8038171979afb4d1.png
[http_www.xiaoyunhua.com_1772.html]: http://www.xiaoyunhua.com/1772.html