[iOS] 微信 webview 中二维码长按无法识别,还有可能是这个原因

王春岩  |  2017. 09. 21   |  阅读 1111 次
无线开发 iOS 微信 二维码

微信 webview 中二维码长按无法识别的问题困扰了我们很久,安卓中是正常的,只在 ios 中出现。

在网上找到的文章一般都是

其中 IOS系统meta缩放问题导致二维码无法识别 把我吓得不轻,因为我的整个项目页面都是基于阿里的 lib-flexible 方案,如果,真是这个问题,岂不是要全部重构。

抱着试试看的态度,把代码中可能涉及到上面两篇文章的,都注释掉,然而并没有什么用。

并不是说他们总结的不对,只是说我遇到的并不是他们的那种情况,希望我们的文章都能给您带来解决问题的思路。

我把代码逐行删除排查,最终终于找到罪魁祸首:

在 iOS 微信,webview 中页面使用过 history state 系列的方法,将导致二维码长按无法识别

代码精简演示

这是一个普通的二维码,正常识别

http://f2e.souche.com/projects/souche/kuvasz-reproduce-bug/history-mode-and-qrcode-in-wx/index.html

<img src="http://img.souche.com/f2e/c7e9a50c87aa379c353dd9acdf541248.jpg" alt="">  

这里使用了 history state 方法,导致无法正常识别。安卓中正常

http://f2e.souche.com/projects/souche/kuvasz-reproduce-bug/history-mode-and-qrcode-in-wx/pushState.html

<script>  
    history.pushState({}, "page 2", "replaceState.html");
</script>  
<img src="http://img.souche.com/f2e/c7e9a50c87aa379c353dd9acdf541248.jpg" alt="">  

如何解决

我们的项目是基于 vue + vue-router,vue-router 开启 history 模式就会使用 history state 系列的方法。

于是我提出了 3 种解决方案:

  1. vue-router 改用 hash 模式
    • 缺点: 线上一些页面需要特殊兼容,并且将无法接入 ssr 或一些相关的基础设施
  2. router 相关跳转改用传统的超链接跳转
    • 缺点: 改动量较大,整个项目也属于基本重构
  3. 弹出二维码窗口使用新打开页面
    • 缺点: 交互、视觉需要重新设计,交互方式不优雅

和产品、交互提出这几点后,交互表示听不懂第 1、2 点(其实我也觉得这两种方案实现起来比较麻烦,就没有过多解释),第三点可以接受,但是可以做成,新打开的页面与原页面相同且已弹出二维码窗口。

线索提炼

新打开页面将会产生浏览历史,后退将会受影响,可以采用 location.replace(...) 方法。

新页面与原页面相同且已弹出二维码窗口,可以在 URL 中增加参数表示需要弹出窗口,直接跳转至该页面。

location search 与 hash 用哪个做参数呢?

如果 hash 可行,是否表示原页面不需要刷新跳转?

如果不需要刷新跳转,就表示根本不用在 URL 中增加参数!

哇啊啊,天哪!我将为其命名为 空跳!!!

最终实现

http://f2e.souche.com/projects/souche/kuvasz-reproduce-bug/history-mode-and-qrcode-in-wx/fixed1.html

<script>  
        history.pushState({}, "page 2", "fixed.html#a");
        function a () {
            window.location.replace(window.location.hash || '#');
            // 这里可以做一些弹窗操作,弹窗内二维码可识别
        }
</script>  
<img src="http://img.souche.com/f2e/c7e9a50c87aa379c353dd9acdf541248.jpg" alt="">  
<button onclick="a()">修复</button>  

完美解决,谢谢大家。

分享到

   
Android显示框架:自定义View实践之绘制篇