移动端开发（使用webuploader上传图片,客户端交互,修改alert弹窗等）

李昌杰发布于2019-08-19 17:26 / 1045人阅读

摘要：之前实习做的一个移动端的页面需要的功能有图片上传点击客户端的返回按钮有提示即与客户端有交互遇到不少的坑总结一下问题图片上传功能使用工具百度的暂时遇到的坑删除图片实际上并没有完全删除需要自己在源码上添加详情看的提问上传的图片旋转角度有问题比

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

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

这个可能和很多人的实际开发有点出入但是自己再修修改改还是能用的

云服务器超融合服务器 H5移动端上传图片移动端开发手机端上传图片安卓端上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78514.html

使用WebUploader解决安卓微信浏览器上传图片中遇到的bug

摘要：具体的环境我也不太了解，但是经过实际多台安卓机型的测试，我采取的方案可以基本确保在安卓机中微信浏览器的成功上传。摘自个人博客：走啊走的记录，欢迎点击查看，效果更佳！微信浏览器上传图片bug的原因微信在新版本中采用的是自己的X5内核浏览器，而在较老的版本中还有可能是安卓的原生浏览器。具体的环境我也不太了解，但是经过实际多台安卓机型的测试，我采取的方案可以基本确保在安卓机中微信浏览器...

ybak 2019-08-19 18:03 评论0 收藏0
在Vue项目中使用WebUploader实现文件上传

摘要：简介是由团队开发的一个简单的以为主，为辅的现代文件上传组件。采用大文件分片并发上传，极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的...

mindwind 2019-08-02 15:35 评论0 收藏0
在Vue项目中使用WebUploader实现文件上传

摘要：简介是由团队开发的一个简单的以为主，为辅的现代文件上传组件。采用大文件分片并发上传，极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的...

endiat 2019-08-26 10:14 评论0 收藏0
在Vue项目中使用WebUploader实现文件上传

摘要：简介是由团队开发的一个简单的以为主，为辅的现代文件上传组件。采用大文件分片并发上传，极大的提高了文件上传效率。另外分片传输能够更加实时的跟踪上传进度。选择文件的按钮。简介：WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的...

funnyZhang 2019-08-30 11:27 评论0 收藏0
Web前端常用插件

摘要：弹窗视频嵌入插件幻灯片图片切换手机端响应式日期控件上传图片控件校验控件分页静态分页动态分页相册效果控件多级下拉图片延迟加载或响应式管理模板插件库大转盘九宫格效果整屏滚动滚动效果用于移动项目的光滑菜单浏览器端格式化工具千手观音弹窗 1.blockUI2.overlay 3.sweetAlert 视频 1.jwplayer2.video.js html53.swfobject Flas...

quietin 2019-08-21 10:31 评论0 收藏0