IOS下微信开发踩过的坑

前言

没有踩坑的程序员不是好程序员，细数一下最近在IOS下微信公众号开发踩过的坑。在介绍一些坑之前，先明白微信在各个系统下使用的浏览器引擎：

● 在 iOS 上，公众号的网页的javascript代码是运行在JavaScriptCore中，是由 WKWebView来渲染的(iOS微信6.5.2之前的版本是UIWebview)，环境有iOS8、iOS9、iOS10(UA大致为：

Mozilla/5.0 (iPhone; CPU iPhone OS 10_0 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12A365   MicroMessenger/5.4.1 NetType/WIFI

)

● 在 Android 上，公众号的网页的javascript代码是通过X5 JSCore来解析，是由X5 基于 Mobile Chrome 53内核来渲染的(UA为：

mozilla/5.0 (linux; android 4.4.4; l55t build/23.0.1.g.0.87; wv) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/53.0.2785.49 mobile mqqbrowser/6.2 tbs/043220 safari/537.36 micromessenger/6.5.7.1041 nettype/wifi language/zh_cn

)

● 在Windows开发工具上， 公众号的网页的javascript代码是运行在Webkit中，是由Chrome Webview来渲染的(UA为：

mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko) version/9.0 mobile/13b143 safari/601.1 wechatdevtools/0.7.0 micromessenger/6.3.9 language/zh_cn webview/0

)

1. Invalid Date的错误

在项目中我使用new Date()转一个日期，比如new Date('2017-05-02 17:01)，结果这么标准的一个写法竟然在微信的IOS端报Invalid Date`错误！！这个不可思议的错误我至今懵逼，不知道为啥？于是我只能按照更加传统的办法去实现这个日期了。

2. 播放音频的问题

刚开始在微信浏览器中播放音频，找了网上的很多方法，大致都是认为应该将play()函数放在wx.ready()回调函数中,但是没有人指出这个做法在微信开发工具上不会生效,并且会下面这个报错: VM3646:1 Uncaught (in promise) DOMException: The element has no supported sources.

但是在手机上即使报这个错误依然是可以播放音频出来的.于是这个方法以为万事大吉,结果在IOS上还是不能奏效.因为我使用React,所以在不断探索下发现在componentWillMount的时候先调用play()后再调用pause方法,然后整个页面就可以在我们想要播放音频的任何时候都可以正常播放音频了.这个Hack方法也是无语的了.

3. autoFocus的问题

这个问题我就更无语了,因为只会发生在我的一个项目中,我想在某个页面加载完毕之后输入框能够自动focus并弹出输入框.但是很不幸,这个小小的愿望实现在IOS下实现不了,但是在另外一个项目中却是可以的(其实只是简单使用了.focus方法).到网上搜索就会有一大堆解决办法,但是并没有卵用.因为另外一个项目明明是可以的,说明问题不在网上说的那些上.于是我开始排查问题.慢慢地问题聚焦到一个点上:

事情是这样的,输入框聚焦的页面是从browserHistory()跳转过来的,在要跳转的页面中因为需要向服务器告知一件事情,然后再跳转,于是我将这个跳转写到了等待服务器确认告知的回调中,但问题恰恰出现在这个回调中,导致在IOS下跳转到页面输入框无法focus.后来我就没再使用回调,而是不等待服务器返回,直接继续跳转就可以focus了,这个问题的原因我也是一脸懵逼!!!不知道哪位大神可以指点一二?

后来发现在IOS下调用focus()方法真的限制很多,只要有一些些小小的代码就很容易造成focus整个失效,对于这个问题真的是很让人抓狂!!

后续如果还有更多的兼容问题,都会总结在这篇文章下....