移动端开发（使用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以前的语句都执行完毕了（不知道说得对不对 这是由我本身总结出来的 若错误 求轻喷）

4.安卓手机 软键盘弹出 会形成页面被压缩

例如 作个整屏的页面（就是高度是整个手机屏幕 没有滚动的）

底部有一系列的工具栏（通常的作法是用绝对定位固定到底部）

若是这时候 页面有input输入框 在部分手机上 软键盘弹出来后

固定到底部的元素会忽然冒上来

从网上随便找的两张图片

     

形成的缘由 我猜测是 软键盘弹出来后 页面的高度就瞬间被减去了软键盘的高度 致使以body定位的元素 出现差错

解决方法！！！！

进入页面以后 设置body的高度为整个手机高度

那么弹出软键盘后 也不会被减去高度了

5. 联动选择框

策划要求弄个能够上下滑动的选择框

例如这样

单纯select确定是知足不了的 要临时本身写一个？可是又太难写不出来？

推荐一个 https://github.com/tianxiangbing/mobile-select-area

这个可能和不少人的实际开发有点出入 可是本身再修修改改仍是能用的