cover_image

鹅厂美女工程师来告诉你,小程序码是如何「绽放」的 | 晓组织 #20

group小程序微信小程序二维码腾讯投票小程序二维码小程序码晓组织腾讯 CDC
知晓程序

<p><img class="alignnone size-full wp-image-914013" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/hpxcxm.jpg" alt="" width="1200" height="750" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/hpxcxm.jpg 1200w, http://www.ifanr.com/wp-content/uploads/2017/09/hpxcxm-360x225.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/09/hpxcxm-768x480.jpg 768w, http://www.ifanr.com/wp-content/uploads/2017/09/hpxcxm-1024x640.jpg 1024w" sizes="(max-width: 1200px) 100vw, 1200px" /></p> <p><span style="color: #605eac;"><strong>知晓程序注:</strong></span></p> <p>「晓组织」是知晓程序推出的全新栏目。</p> <p>每周,我们都会邀请优秀的小程序开发者,从产品/开发/运营等角度,分享他的小程序实战经验。如果你想成为「晓组织」的一员,请发送邮件至 <span style="color: #605eac;"><a style="color: #605eac;" href="http://bigbang@ifanr.com">bigbang@ifanr.com </a></span>给我们投稿,献上你的投名状。</p> <hr /> <p><strong>这里是「晓组织」的第 <span style="color: #605eac;">20</span> 期。</strong></p> <p>我是陈洁婷,是来自腾讯 CDC 的一名前端工程师。</p> <p><img class="alignnone size-full wp-image-904808" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/jieting.jpg" alt="" width="1000" height="500" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/jieting.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/09/jieting-360x180.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/09/jieting-768x384.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>腾讯 CDC 全称为「用户研究与体验设计中心」,是腾讯公司级设计团队,致力于提升腾讯产品的用户体验,探索互联网生态体验创新。</p> <p>最近,我有幸代表团队参加了 HiFSD 第三届前端分享会「小程序专场」,为了避免与其它嘉宾「撞车」,我分享了一些跟「小程序码」相关的内容 。</p> <p>分享会结束后,在同事的鼓励下,我把这次分享的内容进行了整理,现在一并在知晓程序(微信号 zxcx0101)分享给大家,希望对大家了解小程序码背后的故事有帮助。</p> <h3><span style="color: #605eac;">小程序码的出现</span></h3> <p>2017 年 1 月 9 号,<span style="color: #605eac;"><a style="color: #605eac;" href="http://www.ifanr.com/773209">微信正式发布小程序</a></span>,最开始只能通过微信「扫一扫」识别进入特定小程序。4 月 14 号,正式开放了「长按识别二维码」的功能,这意味着,用户使用小程序的便捷程度将大大提高。</p> <p>此后,仅仅过了 4 天,微信又推出了<span style="color: #605eac;"><a style="color: #605eac;" href="http://www.ifanr.com/minapp/821440">小程序码</a></span>,支持「扫一扫」和「长按识别扫码」。</p> <p><img class="alignnone size-full wp-image-904811" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-11.jpeg" alt="" width="908" height="483" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-11.jpeg 908w, http://www.ifanr.com/wp-content/uploads/2017/09/image-11-360x191.jpeg 360w, http://www.ifanr.com/wp-content/uploads/2017/09/image-11-768x409.jpeg 768w" sizes="(max-width: 908px) 100vw, 908px" /></p> <p><strong>小程序码虽然长得跟二维码截然不同,但二维码所有的功能,小程序码同样具备。</strong></p> <p>那么,为什么微信要推出这样的异形二维码?小程序码背后又有何故事?</p> <p>别着急,下面,我就来给大家讲讲小程序码背后的故事。</p> <h3><span style="color: #605eac;">二维码 VS 小程序码</span></h3> <p>第一次扫小程序码的时候,我其实是抱着试一试的心态来的。</p> <p>当时就在想,这么不像二维码的码真的能扫出来?结果一试还真可以!</p> <p>之后,通过查找资料才发现,原来这种异形二维码并不是微信的首创,Facebook、Snap 等公司都已经推出过类似的异形码:</p> <p><img class="size-full wp-image-904813 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-12.jpeg" alt="" width="745" height="283" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-12.jpeg 745w, http://www.ifanr.com/wp-content/uploads/2017/09/image-12-360x137.jpeg 360w" sizes="(max-width: 745px) 100vw, 745px" /></p> <p>例如,下面这个二维码通过图像处理和识别技术,把传统二维码中近 70% 的色块抹掉,做成一种近乎无形的二维码。它是以色列一家创业公司(Visualead)的作品。</p> <p><img class="wp-image-904814 size-full" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/ma.jpg" width="1000" height="400" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/ma.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/09/ma-360x144.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/09/ma-768x307.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p style="text-align: center; font-size: 14px;"><span style="color: #808080;">可通过淘宝 App 扫码识别</span></p> <p>阿里巴巴于 2015 年投资了这家公司,在旗下的网站、App 以及云计算等产品中已经开始使用相关技术。</p> <p><img class="aligncenter wp-image-904825" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/1503996382364.gif" width="400" height="400" /></p> <p style="text-align: center; font-size: 14px;"><span style="color: #808080;">动态视觉码</span></p> <p>此外,还有很多充满想象力的「变脸二维码」(作者:笑脸兔):</p> <p><img class="size-full wp-image-904827 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-14.jpeg" alt="" width="625" height="663" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-14.jpeg 625w, http://www.ifanr.com/wp-content/uploads/2017/09/image-14-360x382.jpeg 360w" sizes="(max-width: 625px) 100vw, 625px" /></p> <p>面对市面上这么多好玩又有趣的二维码,微信推出专属的小程序码,既意料之外,又情理之中。</p> <p>如果上面的理由还没有说服到你,我们再从二维码和小程序码对比的角度,来看看小程序码有什么优点。</p> <p>传统二维码往往有以下几个缺点:</p> <ul> <li><strong>扫码预期:</strong>不知道扫码后会出现什么,每张二维码的背后,可能代表一个文件,一个页面、又或者是一个应用</li> <li><strong>安全性:</strong>二维码由于其开放性,很容易成为木马病毒的温床,很多人会担心扫码后会使自己的手机感染病毒,而放弃扫码</li> <li><strong>品牌宣传:</strong>无法满足小程序的品牌宣传需求</li> </ul> <p>小程序码的优点:</p> <ul> <li><strong> 观赏性:</strong>小程序码与普通二维码相比,看起来更美观</li> <li><strong>扫码预期:</strong>扫码前能明确知道,扫码之后将会体验到一个小程序</li> <li><strong>安全性:</strong>小程序码目前只能通过微信产生,并且只能通过微信识别,安全性更高</li> <li><strong>品牌宣传:</strong>每个小程序码右下角都有固定的微信小程序 logo,每见到一次小程序码,大家就能多一次联想到微信小程序</li> <li><strong>高容错性:</strong>当一张二维码图片中间嵌有某些 logo 图片时,其实相当于是把最中间部分有用的编码信息挖掉,再贴一张 logo 图片上去;而小程序码不同,中间的 logo 区并不包含数据编码的部分,因此小程序码拥有更高的容错性</li> </ul> <p>很明显,小程序码是更好的选择:)</p> <h3><span style="color: #605eac;">小程序码的绽放过程</span></h3> <p>这是小程序码最初的设计稿雏形,可以看到是「一朵花」的形状,稍有不同的是这个雏形图中只有两个定位点。</p> <p><img class="alignnone size-full wp-image-904815" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/ma2.jpg" alt="" width="1000" height="400" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/ma2.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/09/ma2-360x144.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/09/ma2-768x307.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>而目前我们看到的小程序码,一共有 3 个定位点。</p> <p>这个是小程序码的规范设计稿:</p> <p><img class="size-full wp-image-904828 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-16.jpeg" alt="" width="616" height="610" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-16.jpeg 616w, http://www.ifanr.com/wp-content/uploads/2017/09/image-16-360x356.jpeg 360w" sizes="(max-width: 616px) 100vw, 616px" /></p> <p><strong>目前小程序码一共支持 3 种容量,分别是 36 射线、54 射线和 72 射线。</strong></p> <p><img class="size-full wp-image-904829 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-17.jpeg" alt="" width="652" height="216" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-17.jpeg 652w, http://www.ifanr.com/wp-content/uploads/2017/09/image-17-360x119.jpeg 360w" sizes="(max-width: 652px) 100vw, 652px" /></p> <p>每个版本分别对应 L、M、Q、H 这 4 种容错级别:</p> <ul> <li>L 级容错的小程序码,大约 10% 的字码可被修正</li> <li>M 级容错的小程序码,大约 15% 的字码可被修正</li> <li>Q 级容错的小程序码,大约 25% 的字码可被修正</li> <li>H 级容错的小程序码,大约 35% 的字码可被修正</li> </ul> <p>这应该如何理解呢?</p> <p>例如 H 级容错的小程序码,大约 35 %的字码可被修正。这意味着在最理想情况下,<strong>当这个小程序码 35% 的面积被遮挡/损坏,扫码引擎还是能识别出这个小程序码承载的信息。</strong></p> <p>但是,这 35% 被破坏的面积,不能是定位图案和功能性数据,必须是纯编码区,而且错误的区域还要分布得刚刚好,条件是非常苛刻的。</p> <p>所以,<strong>这里的百分数是一个非常理想的数据,实际测试的结果会比这个百分数稍微低一些。</strong></p> <p>不过现阶段,当我们通过官方 API 文档去请求一张小程序码图片时,暂时不用(或者说未能)指定期望生成的是哪种版本、哪个容错级别的小程序码,微信后台会帮开发者自动选择。</p> <p>麻雀虽小,五脏俱全。</p> <p>小程序码有两个 logo 区域,分别是中间的自定义 logo 区和右下角的官方 logo 区,灰色的区域是小程序码的数据编码区,其它彩色区域是小程序码的功能性数据(主要包括版本、纠错等信息)。</p> <p>至于具体如何对应,由于微信官方暂时尚未对外公开,所以这里也要先保密一下哦 :)</p> <p><strong><img class="size-full wp-image-904853 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/WechatIMG1222.jpeg" alt="" width="772" height="435" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/WechatIMG1222.jpeg 772w, http://www.ifanr.com/wp-content/uploads/2017/09/WechatIMG1222-360x203.jpeg 360w, http://www.ifanr.com/wp-content/uploads/2017/09/WechatIMG1222-768x433.jpeg 768w" sizes="(max-width: 772px) 100vw, 772px" /></strong></p> <p>小程序码这朵「菊花」是如何绽放的呢?主要有以下几个步骤:</p> <h4>1. 定位点</h4> <p>首先确定 3 个定位点和右下角的官方 logo 区,经过第一步小程序码的大小也随着确定。</p> <p><img class="alignnone size-full wp-image-904816" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/ma3.jpg" alt="" width="1000" height="400" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/ma3.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/09/ma3-360x144.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/09/ma3-768x307.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <h4>2. 信息编码区</h4> <p><strong>编码的过程,主要是把原始信息(例如某个小程序的首页)转化成计算机能识别的语言——二进制序列(例如 0110&#8230;110)的过程。</strong></p> <p>听起来是不是有点抽象?你可以这么理解,六个月大的婴儿吃不了大米,但是我们可以把大米砸碎研磨变成米浆米糊,这样他就可以食用消化的,原理是差不多的,大而化小 :)</p> <p><img class="size-full wp-image-904859 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-21.jpeg" alt="" width="519" height="67" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-21.jpeg 519w, http://www.ifanr.com/wp-content/uploads/2017/09/image-21-360x46.jpeg 360w" sizes="(max-width: 519px) 100vw, 519px" /></p> <p><strong>编码完的下一步是加纠错码。</strong></p> <p>这个过程有点复杂,这里我也尝试用大家能听懂的语言给大家解释一下。</p> <p>假设,桌子上先是放了 100 个生鸡蛋(代表上一步已经转换好的二进制序列),然后再加入120 个熟鸡蛋(代表纠错码,具体个数就视纠错率而定了,这里只是一种假设)。</p> <p>表面上看起来,生鸡蛋和熟鸡蛋并没有太大的区别,但是其实还是有办法能辨别出来的。例如,生鸡蛋由于蛋黄悬浮到鸡蛋中间,重心不稳,无法旋转,而熟鸡蛋是可以旋转的。</p> <p>经过纠错码这个步骤,数据量变大了(从生熟鸡蛋的例子来看,桌子上的鸡蛋由 100 个变为 220 个),而回到我们上一个步骤,相当于把二进制序列 0110&#8230;110 进行了扩展(假设原来 0 和 1 加起来一共有 170 位,经过纠错编码之后就变成了一共 400 位的 1010&#8230;101)。</p> <p><img class="size-full wp-image-904855 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-22.jpeg" alt="" width="748" height="67" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-22.jpeg 748w, http://www.ifanr.com/wp-content/uploads/2017/09/image-22-360x32.jpeg 360w" sizes="(max-width: 748px) 100vw, 748px" /></p> <p>这里需要补充说明的一点是,<strong>加纠错码这个阶段不只是让数据量简单地增大。</strong></p> <p>一旦小程序码的版本、纠错级别确定了,其对应的纠错码都是固定的了,这样解码阶段才能通过对应的规则去消除纠错码,把真正有用的数据保留下来(回到生熟鸡蛋的例子就是只留下生鸡蛋,而把熟鸡蛋排除掉)。</p> <p>经过信息转换和纠错编码之后,我们得到一串最终的二维码序列,就可以把信息按一定的编码顺序填充到小程序码的编码区域(1对应的是黑色,0对应的是白色)。</p> <p>填充之后,我们发现小程序上花瓣看起来很不均匀,比如下图:</p> <p><img class="alignnone size-full wp-image-904861" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-23.jpeg" alt="" width="728" height="281" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-23.jpeg 728w, http://www.ifanr.com/wp-content/uploads/2017/09/image-23-360x139.jpeg 360w" sizes="(max-width: 728px) 100vw, 728px" /></p> <p>所以,为了让小程序码的花瓣看起来更加均衡,需要再多做一步操作。</p> <blockquote><p>在此之前,我们先来学习一下逻辑异或(XOR,符号是⊕ )的基本知识,请看下面这个表格。</p> <p><img class="alignnone size-full wp-image-904876" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/WechatIMG1118.jpeg" alt="" width="719" height="168" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/WechatIMG1118.jpeg 719w, http://www.ifanr.com/wp-content/uploads/2017/09/WechatIMG1118-360x84.jpeg 360w" sizes="(max-width: 719px) 100vw, 719px" /></p> <p>A ⊕ B ,当 AB 不等时值为1,AB 相等时值为0。A 和同一个 B 经过两次异或操作,结果跟原码相同(A ⊕ B ⊕ B = A)。</p> <p><img class="size-full wp-image-904877 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-24.jpeg" alt="" width="456" height="286" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-24.jpeg 456w, http://www.ifanr.com/wp-content/uploads/2017/09/image-24-360x226.jpeg 360w" sizes="(max-width: 456px) 100vw, 456px" /></p></blockquote> <h4>3. 掩码操作</h4> <p>将小程序码跟 32 种掩膜(又称「mask」,可依照一定的规则生成)进行异或运算,最终选取效果最佳的作为最终的小程序码。</p> <p><img class="size-full wp-image-904879 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-25.jpeg" alt="" width="582" height="525" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-25.jpeg 582w, http://www.ifanr.com/wp-content/uploads/2017/09/image-25-360x325.jpeg 360w" sizes="(max-width: 582px) 100vw, 582px" /></p> <h4>4. 功能性数据</h4> <p>最后一步是填充功能性数据,最终效果如下:</p> <p><img class="alignnone size-full wp-image-904817" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/ma4.jpg" alt="" width="1000" height="400" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/ma4.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/09/ma4-360x144.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/09/ma4-768x307.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p>至此,小程序码就完成了它的绽放过程 :)</p> <h3><span style="color: #605eac;">获取小程序码</span></h3> <p>根据<span style="color: #605eac;"><a style="color: #605eac;" href="https://mp.weixin.qq.com/debug/wxadoc/dev/api/qrcode.html">小程序官方开发文档的说明</a></span>,目前请求生成一个小程序码有两个接口(A 和 B),请求生成小程序二维码有一个接口(C),</p> <p>这三个接口有什么区别呢?</p> <ul> <li><strong>数量限制:</strong>接口 A、C 生成的小程序码和二维码加起来不能超过 10w 个,接口 B 生成的小程序码则数量没有限制</li> <li><strong>时效性:</strong>接口 A、B、C 生成的小程序码/二维码永久有效</li> <li><strong>页面指定性:</strong>接口 A、C 生成的小程序码/二维码可以直接进入指定页面,而接口 B 生成的小程序码需要通过技术开发处理逻辑(通过参数 scene)后才能跳转到其它页面</li> </ul> <p>建议大家优先使用 B 接口去生成二维码,一方面是小程序码始终是比二维码可辨认性高,另一方面没有数量限制,而且技术处理也相对简单。</p> <p>关于小程序码的样式,现阶段我们主要可以定义以下方面的内容:</p> <ul> <li>小程序码的尺寸</li> <li>小程序码的射线颜色</li> <li>自定义 logo 区的图片</li> </ul> <p>由于目前我们只能定义小程序码的射线颜色,无法定义整个小程序码图片的背景颜色。</p> <p>所以,在声明小程序码射线的颜色这一步,主要有两种思路:</p> <p>通过设置 line_color 来决定小程序码射线的颜色,<strong>不过这个时候最好是确保射线跟背景色(白色)有一定的对比度</strong>,降低扫码成本<br /> 设置 auto_color 为 true(默认为 false),微信后台会智能根据中间 logo 区域的主色调来确定小程序码射线的颜色。</p> <h3><span style="color: #605eac;">微信识别小程序码</span></h3> <p>小程序码识别过程,跟小程序码的生成过程是反过来的,大家可以通过简单的流程图来感受一下。</p> <p><img class="size-full wp-image-904881 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-27.jpeg" alt="" width="484" height="685" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-27.jpeg 484w, http://www.ifanr.com/wp-content/uploads/2017/09/image-27-360x510.jpeg 360w" sizes="(max-width: 484px) 100vw, 484px" /></p> <p>虽然,目前小程序暂时不支持直接分享到朋友圈,但是越来越多的小程序已经通过尝试将小程序码与业务功能相结合,生成一张可以在朋友圈传播的小程序码,方便其它用户通过长按识别小程序码直接(从朋友圈)进入相应的小程序。</p> <p><img class="size-full wp-image-904886 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-28.jpeg" alt="" width="860" height="1160" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-28.jpeg 860w, http://www.ifanr.com/wp-content/uploads/2017/09/image-28-360x486.jpeg 360w, http://www.ifanr.com/wp-content/uploads/2017/09/image-28-768x1036.jpeg 768w, http://www.ifanr.com/wp-content/uploads/2017/09/image-28-759x1024.jpeg 759w" sizes="(max-width: 860px) 100vw, 860px" /></p> <p>长按识别二维码(或小程序码)在微信下是一个再自然不过的交互了,既然讲到这里,就顺便跟大家简单聊聊长按识码背后的小故事。微信会根据不同的场景采取不同的识别策略,这里主要分为两类:</p> <h4>1. Webview 下长按识别</h4> <p>当微信检测到用户长按识别的时候,会第一时间把当前屏幕截屏,然后去检测屏幕截图是否有小程序码(或二维码)。</p> <p>如果有,则出现长按识别小程序码(或二维码)的菜单项,点击该菜单项即可跳转到对应的小程序码(或二维码对应的内容);反之,如果截图里面没有小程序码(或二维码),又或者小程序码(或二维码)图案不完整,则不会有识别结果。</p> <p><img class="size-full wp-image-904888 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-29.jpeg" alt="" width="251" height="595" /></p> <p><img class="size-full wp-image-904889 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-30.jpeg" alt="" width="473" height="524" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-30.jpeg 473w, http://www.ifanr.com/wp-content/uploads/2017/09/image-30-360x399.jpeg 360w" sizes="(max-width: 473px) 100vw, 473px" /> <img class="size-full wp-image-904890 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-31.jpeg" alt="" width="472" height="524" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-31.jpeg 472w, http://www.ifanr.com/wp-content/uploads/2017/09/image-31-360x400.jpeg 360w" sizes="(max-width: 472px) 100vw, 472px" /></p> <h4>2. 图片查看器下长按识别</h4> <p>假设有人在朋友圈发送了一张包含小程序码(或二维码)的图片,你点击预览小图(这时称图片处于图片查看器中),这个时候也是可以长按识别的,那这个时候就是直接发图去识别!(但不一定是原图哦,这里的策略是非常非常多的,例如这张图片非常大,微信就会先做适当压缩再上传去识别的)</p> <p><img class="size-full wp-image-904891 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/image-32.png" alt="" width="472" height="528" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/image-32.png 472w, http://www.ifanr.com/wp-content/uploads/2017/09/image-32-360x403.png 360w" sizes="(max-width: 472px) 100vw, 472px" /></p> <p>现阶段(2017.8)经过测试发现,<strong>在普通场景下,只要微信能长按识别二维码,就也同样能长按识别小程序码;不过在小程序下面,暂时只支持长按识别小程序码哦,长按识别二维码是不支持的。</strong></p> <h3><span style="color: #605eac;">最后</span></h3> <p>感谢大家阅读到最后,为了表达我的感激,我决定(再次)把研究过程中遇到过的最好看的小程序码的图片分享给大家 :)</p> <p><img class="alignnone size-full wp-image-904818" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/ma5.jpg" alt="" width="1000" height="400" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/ma5.jpg 1000w, http://www.ifanr.com/wp-content/uploads/2017/09/ma5-360x144.jpg 360w, http://www.ifanr.com/wp-content/uploads/2017/09/ma5-768x307.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></p> <p style="text-align: center;"><span style="color: #605eac;"><a style="color: #605eac;" href="http://www.ifanr.com/minapp/797451">腾讯投票</a></span><br /> 有趣实时的投票小程序</p> <h4>参考文章和图片来源:</h4> <ul> <li>小程序码相关介绍 —— by 微信团队</li> <li><span style="color: #605eac;"><a style="color: #605eac;" href="https://mp.weixin.qq.com/s/5Cs7UOUdm6Whq9s07t1vBQ">《实践并解读最新的小程序码生成方式》 —— by 花叔</a></span></li> <li><span style="color: #605eac;"><a style="color: #605eac;" href="https://mp.weixin.qq.com/debug/wxadoc/dev/index.html">《微信公众平台小程序开发档》</a></span></li> </ul> <p><strong>关注「<span style="color: #605eac;">知晓程序</span>」公众号 👇</strong></p> <ul> <li>在微信后台回复「<span style="color: #605eac;"><b>晓组织</b></span>」,看厉害的人怎么做小程序。</li> <li>在微信后台回复「<span style="color: #605eac;"><b>666</b></span>」,加入知晓开发联盟。</li> </ul> <p><img class="size-full wp-image-911397 aligncenter" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2017/09/bottomqrcode.gif" alt="" width="800" height="400" srcset="http://www.ifanr.com/wp-content/uploads/2017/09/bottomqrcode.gif 800w, http://www.ifanr.com/wp-content/uploads/2017/09/bottomqrcode-360x180.gif 360w, http://www.ifanr.com/wp-content/uploads/2017/09/bottomqrcode-768x384.gif 768w" sizes="(max-width: 800px) 100vw, 800px" /></p>