微信webview中的一些问题

这篇文章汇总了企业号的开发者反馈过来的微信webview中的一些问题。

Android jsApi imagePreview

使用这个api需要注意两点:

  • 如果是通过302/301来跳转显示图片,在Android下是不可用的,会获取不到图片的真实地址,前端的表现就是拉去不到图片;
  • Android下这个api是另外起一个http去拉取图片的,所以不会带上cookie,并且和webview不会公用一套缓存,换言之,就是获取不到用户信息,并且即使webview中已经拉取过图片,使用这个jsApi也是会重新拉取一次的。

Android input[type=file]的问题

有接到反馈,某某牌子的某某手机,微信webview中无法使用文件上传,的确是有这个问题的。

首先,在Android 4.4.1/4.4.2系统中,webview不再回调WebViewClient.openFileChooser方法。

而在之前的版本的系统中,客户端如果需要对H5的 <input> 标签做支持,即在H5支持选择文件的功能,可以通过重写WebViewClient非public的
openFileChooser方法来实现。可在4.4.1/4.4.2系统中,该回调方法被废弃,客户端无法捕获用户在H5页面上对<input>标签的点击。

谷歌官方也未对此给出任何解释或可行的替代方案:参考链接

严格的说,这个不是微信的问题,基于这些版本的Android的webview都会有相关的问题,建议先尝试最简单的页面来判断是否是Android系统版本的问题。

其次,还发现当使用HTML5 pushState API改变了页面URL以后,也会到导致input[type=file]失效。

建议:
如果需要做文件上传的交互,一定要注意做好优雅降级,处理好这部分没有办法支持的手机。        

Android jsApi权限先有后无的问题

可能原因有很多,有一种原因是:

页面用了HTML5 pushState API导致页面URL变化了。

在Android下,用history.pushState改变地址栏时,不会触发微信webview的地址改变时的回调,所以微信无法判断到当前的URL是否有相关权限。

建议:
Android下通过hash来控制页面变化,不要用pushState

iOS下如何改变页面title

iOS下在微信中,通过document.tilte = “new title”的方式,不会使得title有变化,具体原因未知,但这里我们可以通过hack的方式来做到。

看如下代码:

1
2
3
4
5
6
7
8
var $body = $('body')
document.title = ‘title’
// hack在微信等webview中无法修改document.title的情况
var $iframe = $('<iframe src="/favicon.ico"></iframe>').on('load', function() {
setTimeout(function() {
$iframe.off('load').remove()
}, 0)
}).appendTo($body)

Android 下localStorage的问题

首先,微信的webview中是支持使用localStorage,并没有做限制。

但是鉴于Android碎片化问题严重,的确是有发现一些机器不支持localStorage,这并不是微信做的限制,而是这个机器的系统就不支持,所以建议开发者做好兼容,对于不支持localStorage的机器也做好相关的工作,保证正常使用。

建议:
做好兼容,保证不支持的手机也能正常使用

zepto的问题

在做移动端开发的时候,通常建议使用更小更高效的 zepto 来替代jQuery,作为基础库。

但是,在非常旧版本的微信(微信4.5)中有一个问题,微信默认注入了zepto库,所以这时候如果开发者自己在引入一次,就会有一些问题。

建议:
因为这么老版本的微信已经很少很少了,我们基本可以不关注,但是想要把工作做到100%的开发者,请做下兼容处理,如果发现
已经有zepto库在页面中,就不要引入自己的zepto库。

微信和QQBrowser

目前,5.4以后Android微信,如果发现系统中已经安装了QQBrowser,那么会自动调用他的X5内核来作为webview的内核。

建议:
如果有用户反馈问题,而在你的同型号同系统的机器上并不会有的话,建议关注下,是不是因为内核不同引起的。

HTML5某某API或者CSS3某某属性能不能用?

首先这里,我们要明白一个问题,微信的webview很大程度上是依托于当前用户的手机系统中的浏览器的,所以某某属性API能不能用更多是由用户的系统决定的。这里推荐使用Can i use 检查。

建议:
在使用前先检查所需要使用的API支持情况,并做好相关的测试工作。