之前实习做的一个移动端的页面 需要的功能有图片上传 点击客户端的返回按钮 有提示(即与客户端有交互） 遇到不少的坑 总结一下问题

1.图片上传功能  使用工具 百度的webuploader

暂时遇到的坑

1.1  删除图片 实际上并没有完全删除 需要自己在源码上添加

详情 看github的提问  https://github.com/fex-team/webuploader/issues/594

1.2 上传的图片 旋转角度有问题 比如 在上传页面看的图片缩略图 是水平显示的 但上传到后台 显示的是竖着的

详情可看  https://github.com/fex-team/webuploader/issues/476

文中作者有说到  这个需要和后台配合实现 因为如果在前端实现 会增加负担

(遇到这情况 就多多拜托后台哥哥吧

1.3 使用fastclick后 如果点击屏幕过快 会无法激活上传功能

这个是我发现最大的坑 可能也不关这个插件的事 因为不用fastclick的情况 是可以正常使用的

但在网上找了很多文章 都没有找到解决方法 最后 只能使用最蠢的方式来解决

正常情况 激活fastclick最直接粗暴的方式是

window.addEventListener('load', function() { FastClick.attach(document.body); }, false);

问题就出现在 fastclick激活的区域是整个body 那么尝试一下

不绑定webuploader的上传按钮 会如何呢？

https://github.com/ftlabs/fastclick

fastclick的github上有一处 是忽略激活的

但我给尝试了之后 发现并没有作用

最后用最蠢的方式是 获取各个需要清除300ms的元素 然后再一一激活fastclick

（这实在是太蠢了 但目前我是想不出好方法 只能这样将就用着了

1.4 暂未解决的坑

webuploader  在安卓机子上使用上传图片的时候 不能一次性选择多张图片（可能需要安卓客户端那边帮忙 暂未找到解决方法

ios 上 点击上传图片按钮 会有300ms延迟 （就算之前使用了fastclick激活整个body也会存在）

PS：其实最可怕的情况是 webuploader的git 好久没更新了  （好可怕。。

 

2.与客户端交互

因为这个页面是嵌在APP里面打开的

有个功能是 用户输入了内容的时候 点击APP左上角的返回按钮 跳出一个提示框来提示用户是否返回

使用的工具是 webviewJavascriptBridge

附上github地址

写好一个function 然后客户端调用

然后与客户端交互的方式是通过修改 document.location 来告知客户端 然后客户端来进行判断 （这方法有点蠢 求大神告知更好的方法

到这里就会出现一个问题了

（弹窗用的是系统自带的alert和confirm弹窗 原因是如果用div模拟的弹窗 能控制的范围只有在页面部位

例如 div的模拟弹窗 后面再用一个遮罩层 阻挡用户的其他操作 能阻挡的只有页面范围内

但头顶的原生app按钮 并不能阻挡 无奈使用系统的alert弹窗）

2.1 ios的弹窗 会出现网址

例如

解决方法 （去除移动端alert confirm的网址(url)）

好了 网址不显示了 但是！ 我用的返回框是confirm弹窗啊！

有确定 和 取消 两个按钮 然后根据用户点击哪个作出操作啊！

但是这个方法的弹窗 是用iframe 点击完之后就消失！ 根本不能判断