你的位置:首页 > 网页设计

[网页设计]移动端开发(使用webuploader上传图片,客户端交互,修改alert弹窗等)


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

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地址 https://github.com/marcuswestin/WebViewJavascriptBridge

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

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

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

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

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

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

2.1 ios的弹窗 会出现网址

例如

解决方法 (去除移动端alert confirm的网址(url))http://blog.5ibc.net/p/21287.html

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

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

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

所以 我又自己修改了一下confirm的写法

2.2 修改confirm弹窗

红色为自己添加
因为这个重写的confirm是在一个框架里面的 反应后就立刻取消
所以不能通过它来判断
需要在里面添加判断
var wConfirm = window.confirm;window.confirm = function (message,trueFn,flaseFn) {  try {    var iframe = document.createElement("IFRAME");    iframe.style.display = "none";    iframe.setAttribute("src", 'data:text/plain,');    document.documentElement.appendChild(iframe);    var alertFrame = window.frames[0];    var iwindow = alertFrame.window;    if (iwindow == undefined) {      iwindow = alertFrame.contentWindow;    }    var result = iwindow.confirm(message);    if(result){      trueFn();    } else{     flaseFn();    }    iframe.parentNode.removeChild(iframe);  }  catch (exc) {    return wConfirm(message);  }}

3.由上面的alert弹窗 衍生而出的问题

项目中遇到 

在 ios中 alert弹窗会先执行
 
例如 
alert(1);
console.log(2);
alert(3);
 
ios会先弹出1 然后弹出3 最后才输出2
 
所以就会遇到一些情况
在alert语句前 本来是想让某些元素隐藏 或者 改变样式
但实际上ios会先弹出alert窗 但想改变的元素并还没有改变样式
只会在点击alert窗后才会执行
 
很蛋疼对不对?!
解决方法如下!!!!
将alert弹出的语句放在setTimeout里面
setTimeout(function(){
    alert(3);
},0)
 
原理是 setTimeout会在js空闲之后才会执行里面的函数
所以把弹窗放进里面 就能确保alert之前的语句都执行完毕了(不知道说得对不对 这是由我自己总结出来的 若错误 求轻喷)