小程序能力大升级!实战长按识别企微个微!

2,147 阅读3分钟

2021年5月17日,微信 iOS 端发布了 8.0.6 版本,虽然微信的更新日志一如既往的敷衍,但其实这里面隐藏着巨大的能力升级。

升级了什么呢?小程序已经支持长按识别企微、个微了。

这个小小的升级,能量究竟有多大?我们需要先了解下在拥有这个能力之前,小程序引流用户加企微、个微的流程。以屈臣氏为例:

第一步,需要引导用户点击进入客服会话

1.jpg

第二步,需要用户发送小程序至客服会话

2.jpg

第三步:客户会话里发送企微二维码,用户长按扫码关注

3.jpg

指望客户乖乖做这么多操作实在是不靠谱,效果差也就可想而知了。相比之下,长按扫码关注的效率就不知道要高多少倍了,粗略估计,这两种不同方式加企微、个微的效率相比可能有十倍以上的差别。

体验小程序内扫码加个微

个微1.png

体验小程序内扫码添加企微

企微1.png

那开发者怎样利用这个能力呢?下面给出三种实战方案:

preview 二维码

使用的小程序 api 如下:

wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})

效果如下:

个微1.png

这样做的缺点是打开的页面永远是一张图或者多张图,图里只能放一个二维码。假如把两个二维码都放在一张图里,那么会识别最后一个二维码。比如下面的小程序,我将企微、个微放在一张图里,长按识别的就是个微(这跟手机屏幕大小有关,比较大的屏幕还是能识别两个码的):

两个码.png

webview 中嵌入二维码

目前,也可以将企微或者个微的二维码放在公众号推文里。小程序直接以 webview 的方式打开推文,长按扫描推文里的二维码也能识别并关注。 代码非常简单,如下:

<web-view src="公众号推文的链接"></webview>

效果如下:

个微1.png

这里唯一要注意的点就是公众号必须跟小程序关联起来,否则小程序的 webview 无法打开推文。这个关联操作在公众号后台即可操作。

image标签展示二维码

直接使用 image 标签展示二维码,代码如下:

<image src="二维码图片地址" show-menu-by-longpress="true"></image>

这里关键的一点在于 show-menu-by-longpress="true" 这个属性一定要加上,否则长按不会有反应。

这种方案看起来很好,也没有第一种方案的限制,为什么把它放在最后面来说呢? 这是因为现在的版本 8.0.6 实测起来还有 bug,如下:

bug1.jpg

点击打开对方卡片,会没有反应。官方的话也证实这是当前版本的 bug 了,并承诺会在下一个版本里面修复。也许你看到这篇文章的时候这个 bug 已经修好了。

以上三种方式,frank 都在微信 iOS 8.0.6 版本测试过,安卓 8.0.3 也试过,如果你点上面的小程序不能打开企微个微,请先检查一下你的微信版本。

公众号二维码怎么办

目前测试下来,公众号二维码还是没法在原生小程序里长按识别。只能通过 webview 的方式来长按识别。如下:

webview1.png

以上,如果你看了觉得对你有所帮助,就给 frank 点个赞,分享给身边的朋友们叭,这样 frank 也有更新下去的动力,多谢各位啦~