踩坑---一个不是坑的难以言喻的坑,有关企业微信在iOS端上传文件的坑

2018-08-09 admin

起因

今早一去公司,被组长远程发过来一个Bug,据说是用户反馈的一个iOS的问题,在我们的业务中,有一个有关图片上传的问题。我们的业务代码是在自己的客户端、微信、钉钉、企业微信四个地方跑的同一套代码。

Bug描述

Bug的具体描述是企业微信用户在使用上传图片时,无反应。但是在安卓下运行正常。在其他平台运行正常。 找测试复现该问题时,发现在安卓平台下一切正常,但是在iOS端测试发现,在iOS8上运行正常,在iOS9往上的系统中,会弹出一个报错

a.oldWXObj.invoke not a function

解决过程

  1. 因为是在iOS端有问题,所以我初步怀疑是因为我们自己对企业微信的相关SDK进行二次封装的时候出现了问题,所以我在自己的业务代码中找到了调用wx.chooseImage的地方,然后console出相关的opts参数
wx.chooseImage(opts);//这是我们自己的调用

wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
    defaultCameraMode: "batch", //表示进入拍照界面的默认模式,目前有normal与batch两种选择,normal表示普通单拍模式,batch表示连拍模式,不传该参数则为normal模式。(注:用户进入拍照界面仍然可自由切换两种模式)
    success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表,
                // andriod中localId可以作为img标签的src属性显示图片;
                // 而在IOS中需通过上面的接口getLocalImgData获取图片base64数据,从而用于img标签的显示
    }
});

发现opts没有问题,然后开始查看企业微信的开发文档,发现了这样一段话

此接口在企业微信2.3及以后版本支持相机连拍(当sourceType是camera时) 参数defaultCameraMode仅在企业微信2.4.20及以后版本支持 从2.4.6版本开始,IOS版企业微信浏览器将升级为WkWebView,因其不支持原有的直接通过localid作为img标签的src属性来显示图片的方式。开发者需要采用通过getLocalImgData来获取localid对应图片的base64数据。

看到了iOS,看到了有关图片上传,便以为是这里的问题,然后便开始对localid 进行修改,改着改着发现,不对啊,是调用的时候就报错了,并不是因为在callback里面的问题啊。

  1. 然后把wx.chooseImage进行alert,发现这个函数是存在的,但是发现还是有问题,代码大概是这样的
a.oldWXObj.invoke("chooseImage",params,callback)

然后我一直在想这个a.oldWXObj是什么东东,看源码,并没有找到这个东西,然后查看我们的sdk版本是1.0.0,最新的sdk版本是1.2.0。以为是因为sdk版本的原因,然后把项目中的sdk升级,问题还是存在,看来不是sdk的原因,继续探索。

  1. 后来没有思路,去请教大佬,大佬给了个思路,在企业微信中开启一个别的第三方的业务,看看他们的图片上传是否也存在相同的问题,OK,照着这个思路往下继续。我去,第三方的图片上传是没有问题的,OK,那么肯定是我们自己的业务代码的问题,然后把业务剥离出来,在新建两个文件,一个采用我们自己封装的sdk,一个不用自己封装过后的sdk,直接调用wx的sdk,然后我把相关的**wx.config**给 复制 了过去,发现图片上传还是有问题,然后考虑是不是免登没有通过呢? 试着调用其他的方法,发现获取当前位置、扫描二维码、开始录音这三个方法都可以成功调用,确定免登是通过了的,不是免登的问题。
  2. 大佬说换个思路,用Charles开始抓包查看第三方的实现,这一部分才是写这个 踩坑记录的重点 ,主要是看这个调试的过程,最开始用Mac自带的Safari尝试调试,发现企业微信并没有把调试开放出来,只能通过抓包来一点点尝试了,OK,在简书上搜索Charles抓包,按照步骤,发现第三方是https,然后再万能的简书,抓包https,一切完成后。发现第三方也是调用的wx.chooseImage,那么说明我们调用的业务代码没问题啊,然后通过1.png这种方式,用本地文件代替线上的文件进行调试,把我们的相关业务代码代替第三方的相关代码,发现我们的代码在第三方的应用里面是正常运行的。我去!!!这就奇怪了呀,这时,一天的时间不知不觉都过去了,还没有解决问题,心中真的是,一言难尽!!!
  3. 最后,开始从头梳理代码,从第三方最开始调用企业微信的sdk开始一点点对比,把我们的相关信息跑在第三方平台里,来,把wx.config粘贴过来、贴过来、过来、来…咦,这个config有一点不一样诶!!!
//我们自己的配置
wx.config({
    debug: false, 
    appId: '', // 必填,企业微信的corpID
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

//文档标准的配置
wx.config({
    beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,企业微信的corpID
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

突然发现我们的代码配置里面,没有beta这个配置,加上,试一下,😌😌😌,心情很是复杂,代码这次终于正常调起来了。 OK,到这里,问题解决。

这次不是踩坑的大坑,总结出3点:

  1. 配置一旦配好后,再没动过,所以不会想到是配置的问题,直接就奔着调用的方法去了。下一次,代码还是要记得从头捋!!!
  2. 企业微信对前一版本的相关配置兼容有坑!!!
  3. 学会了用第三方的代码来检测自己的业务代码,用本地代码替换线上代码进行运行调试。
  4. 多学多做多看,大佬就是大佬,争取自己早日成为大佬。😌😌😌

原文链接:https://segmentfault.com/a/1190000015942567

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37625.html

文章标题:踩坑---一个不是坑的难以言喻的坑,有关企业微信在iOS端上传文件的坑

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 文件上传模块FileUploadModule 首先要在使用该组件的模块内导入文件上传模块 ...
2017-03-09
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
回到顶部