微信内置浏览器WebApp开发，踩坑

[maxzhang]

重定向：http://www.maxzhang.com/2014/07/%E5%BE%AE%E4%BF%A1%E5%86%85%E7%BD%AE%E6%B5%8F%E8%A7%88%E5%99%A8WebApp%E5%BC%80%E5%8F%91%EF%BC%8C%E8%B8%A9%E5%9D%91/

---

最近花6天时间完成了一个七夕的小活动，是一个简单的WebApp。由于我前期对面向微信的Web开发评估不足，导致开发过程十分艰难。写这篇文章总结下，惊醒自己未来不要再犯这样的错误。

问题：

1、 有些比较老旧的手机不支持多个触点，可能是硬件不支持，也可能是软件问题。这并不是微信的坑，对于这个问题其实我是早就遇到过的，心里有底，也就不算问题了。

2、 手机上传图片会变横，比如：竖着拍照上传，图片不是竖的，而变成横的。这个也不是微信的问题，是因为我以前还没在手机上做过图片上传，所以第一次遇见。

解决方案：解析图片的EXIF信息，使用其中的orientation字段，根据方向调整图片。参考：https://www.imququ.com/post/how-to-auto-rotate-photo-in-js.html

3、 Android版微信上传图片不支持拍照，只能从图库中选择，参考：http://mp.weixin.qq.com/qa/index.php?qa=12686&qa_1=%E5%AE%89%E5%8D%93%E7%89%88%E5%BE%AE%E4%BF%A1%E5%86%85%E5%B5%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E5%93%8D%E5%BA%94input-file%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6%E4%B8%8D%E8%83%BD%E7%9B%B4%E6%8E%A5%E8%B0%83%E7%94%A8%E6%8B%8D%E7%85%A7%E6%88%96%E5%BD%95%E5%83%8F%E5%8A%9F%E8%83%BD-%E8%80%8Ciphone%E7%89%88%E6%89%8B%E6%9C%BA-%E6%98%AF%E5%8F%AF%E4%BB%A5%E7%9A%84

4、 一些Android手机，比如三星Note3，从SD卡中选择图片上传，会提示“请选择SD卡中的图片”。我理解这个SD卡是指外接SD卡，直接从手机内置存储中选择图片是可以上传成功。

5、 Android4.4下<input type="file">由于系统WebView的openFileChooser接口更改，导致无法选择文件，从而导致无法上传文件。现在，大多数浏览器都修复了此BUG，但当前版本5.3的微信内置WebView并未修复。参考：https://code.google.com/p/android/issues/detail?id=62220

目前Android4.4版本系统占比上升非常快，从目前监控数据来看，1个月内上升了2%，当前Android4.4总占比超过5%，希望微信能尽快修复此BUG。

目前最新进展：Android 4.4.3+ 以上的版本已经修复了这个BUG。

6、 微信5分钟自动清空一次缓存。如果访问的网页5分钟没有任何动作的话，就会自动清空缓存，我测试的缓存包括：localStorage、sessionStorage。未测试ApplicationCache和WebSQL，暂时未知。

通过后期和同僚交流，得知微信不会主动清空缓存。可能是因为Android设置setDomStorageEnabled开启缓存，但没有设置存储目录，导致缓存被存储到临时目录中，临时目录就有被自动清除的可能。参考：http://stackoverflow.com/questions/2961460/my-android-html-application-is-losing-values-stored-in-localstorage-when-it-shut/5418555

可以确认cookie不会被主动清除。如果将微信进程杀死，过期时间为session状态的cookie会被清除。如果用户主动退出微信登入，所有cookie都会被清除。

_得到一些新的反馈：1、有小部分安卓机器cookie/localstorage都失效，目前微信那边没有好的解决方案；2、一般来说cookie + localstorage就能解决大部分问题。_我现在使用了cookie + localstorage双备份的策略。

在微信下，一切本地存储的方式都是不靠谱的，唯一靠谱的是微信开发API，使用微信的用户OpenID来跟踪用户。

---

后面如果还有问题，我会继续补充

[hkongm]

好！支持！
weixin分享网页的API貌似也经常改。。。

[mashuangshuang]

小米2在微信浏览器中图片上传成功，但是返回的图片地址的是空的，不知道咋回事

[maxzhang]

@mashuangshuang 你确定上传成功了？返回地址是服务端的事情吧

[mashuangshuang]

确定啊,http://mashuangshuang.sinaapp.com/pc/0723.php

[maxzhang]

@mashuangshuang 你可以在服务端debug下，看看图片有没有upload，再看服务端接收数据是否正常。这样的问题可能因为服务端没有接收到正常的文件流，你可以使用WebUploader的二进制模式sendAsBinary，文档 http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_options

[bluest-hu]

请问您做过微信内置浏览器的上下滑动处理么？有遇到过困难么？我使用了几个库好像均无效。

[maxzhang]

@ihuguowei 上下滑动？能否将问题描述得更清晰一些？

[udbmnm]

@ihuguowei 微信上下滑动做过，iScroll可以做

[bluest-hu]

@maxzhang 识别上下（swipeDown、swipeUp）滑动手势，与左右滑动类似，我不知道这样表述好一点。
@udbmnm 谢谢您，我去试试。

[udbmnm]

@ihuguowei 滑动手势库很多，http://hammerjs.github.io/ 这个是我以前用过的一个

[bluest-hu]

@udbmnm 谢谢，我现在用zepto 模块也行的，不过需要阻止掉冒泡。

[tonyljl526]

您好，请教一个微信浏览器的问题。通过二维码扫描进去的页面，第一个input会自动获取焦点。刷新或者是通过连接点进去的就不会。

请教：怎么在微信浏览器内阻止input自动获取焦点呢？

[Cydmi]

楼主你好 我用WebUploader在微信中上传图片，后台可以获取图片，但是有个问题，很多安卓手机不支持预览，而且后台的得到的图片没有后缀，但是又有些手机上传正常，苹果手机正常。很郁闷

[Megasu]

现在微信内置的浏览器是QQ浏览器了，不过也还是有不少坑，在字体图标那儿就摔过1次。

[YongX]

微信浏览器里面的cookie，我这边测试下来发现他不像楼主说的不会被清除呐？服务端设置了有效期1年，隔天还是被删掉了。

[maxzhang]

使用 cookie + localstorage 双备份策略，可以保证绝大部分情况下cookie正常

[okooo00]

input file 选择拍照，拍完照页面就会自动刷新，内存不足？