微信内置浏览器WebApp开发,踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub
最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp。由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难。写这篇文章总结下,惊醒自己未来不要再犯这样的错误。
问题:
1、 有些比较老旧的手机不支持多个触点,可能是硬件不支持,也可能是软件问题。这并不是微信的坑,对于这个问题其实我是早就遇到过的,心里有底,也就不算问题了。
2、 手机上传图片会变横,比如:竖着拍照上传,图片不是竖的,而变成横的。这个也不是微信的问题,是因为我以前还没在手机上做过图片上传,所以第一次遇见。
解决方案:解析图片的EXIF
信息,使用其中的orientation
字段,根据方向调整图片。参考:https://www.imququ.com/post/how-to-auto-rotate-photo-in-js.html
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来跟踪用户。
后面如果还有问题,我会继续补充
小米2在微信浏览器中图片上传成功,但是返回的图片地址的是空的,不知道咋回事
@mashuangshuang 你确定上传成功了?返回地址是服务端的事情吧
@mashuangshuang 你可以在服务端debug下,看看图片有没有upload,再看服务端接收数据是否正常。这样的问题可能因为服务端没有接收到正常的文件流,你可以使用WebUploader的二进制模式sendAsBinary
,文档http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_options
@ihuguowei 上下滑动?能否将问题描述得更清晰一些?
@ihuguowei 微信上下滑动做过,iScroll可以做
@ihuguowei 滑动手势库很多,http://hammerjs.github.io/ 这个是我以前用过的一个
微信内置浏览器WebApp开发,踩坑 · Issue #31 · maxzhang/maxzhang.github.com · GitHub的更多相关文章
- 【微网站开发】之微信内置浏览器API使用
最近在写微网站,发现了微信内置浏览器的很多不称心的地方: 1.安卓版的微信内浏览器底部总是出现一个刷新.前进.后退的底部栏,宽度很大,导致屏幕显示尺寸被压缩 2.分享当前网站至朋友圈时,分享的图片一般 ...
- 微信内置浏览器的JsAPI(WeixinJSBridge续)[转载]
原文地址: http://www.baidufe.com/item/f07a3be0b23b4c9606bb.html 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript ...
- 判断微信内置浏览器的UserAgent
要区分用户是通过"微信内置浏览器"还是"原生浏览器"打开的WebApp, 可以通过navigator.userAgent来进行判断. 以下是对各种平台上微信内置 ...
- 微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记
微信内置浏览器的JsAPI(WeixinJSBridge续)_Alien的笔记 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView) ...
- 如何判断微信内置浏览器(通过User Agent实现)
在进行微信公众账号开发的时候,其中很大一块是微站点的开发,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢? 微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信 ...
- 微信内置浏览器和小程序的 User Agent 区别及判断方法
通过UA来判断不同的设备或者浏览器是开发者最常用的方式方法,而对于微信开发和小程序也是同样的一个情况,我们可以通过微信内置浏览器 User Agent 信息来判断其具体类型或者设备. 所以子凡就通过徒 ...
- 微信内置浏览器http请求10秒内接收不到数据会自动重发第二遍请求
微信内置浏览器http请求10秒内接收不到数据会自动重发第二遍请求 这是个坑
- 微信内置浏览器对于html5的支持
微信内置浏览器对于html5的支持 来源: 作者: 热度:102 日期:14-06-10, 09:10 AM 我在做针对微信的HTML5应用, 目前遇到的几个问题是 一. 安卓版微信直接调用系统浏览器 ...
- 微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏
微信内置浏览器的JsAPI(WeixinJSBridge续)进入全屏 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript Interface) ...
随机推荐
- Android 抗锯齿的两种方法
Android 抗锯齿的两种方法 (其一:paint.setAntiAlias(ture);paint.setBitmapFilter(true)) 在Android中,目前,我知道有两种出现锯齿 ...
- JS实现雪花效果
演示效果 http://www.9696e.com/demo/snow/ 春节之前新一博客也会一直挂着的. 加载链接 <script src="http://www.9696e.com ...
- 《理解 ES6》阅读整理:函数(Functions)(五)Name Property
名字属性(The name Property) 在JavaScript中识别函数是有挑战性的,因为你可以使用各种方式来定义一个函数.匿名函数表达式的流行使用导致函数调试困难,在栈信息中难以找出函数名. ...
- 黑马程序员+SQL基础(下)
---------------------- <a href="http://edu.csdn.net"target="blank">ASP.Net ...
- .NET JSON对象序列化和反序列化
class Program { static void Main(string[] args) { Console.WriteLine("========================== ...
- Asp.net web form url route使用总结
asp.net web form 使用URL路由 注不是mvc中的路由 一.前台控件使用路由,通过表达式生成url地址,注意给路由参数赋值,防止使用了其他路由表达式值方式1:<asp:Hyper ...
- [.net 面向对象编程基础] (17) 数组与集合
[.net 面向对象编程基础] (17) 数组与集合 学习了前面的C#三大特性,及接口,抽象类这些相对抽象的东西以后,是不是有点很累的感觉.具体的东西总是容易理解,因此我们在介绍前面抽象概念的时候,总 ...
- Java提高篇(二六)-----hashCode
在前面三篇博文中LZ讲解了(HashMap.HashSet.HashTable),在其中LZ不断地讲解他们的put和get方法,在这两个方法中计算key的hashCode应该是最重要也是最 ...
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
- Spring-Context之八:一些依赖注入的小技巧
Spring框架在依赖注入方面是非常灵活和强大的,多了解点一些注入的方式.方法,绝对能优化配置. idref idref属性可以传入一个bean的名称,虽然它是指向一个bean的引用,但是得到的是该b ...