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

最近花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分钟没有任何动作的话,就会自动清空缓存,我测试的缓存包括:localStoragesessionStorage。未测试ApplicationCacheWebSQL,暂时未知。

通过后期和同僚交流,得知微信不会主动清空缓存。可能是因为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来跟踪用户。



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/


  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值