一、写前
好长时间没写博客了，关键是最近实在是没什么时间，今天来给大家分享一个我在项目中遇到的大坑，帮助大家前做好防范。
二、正文
最近公司在开发微信公众号的项目，其中有一个功能是描述在手机端相册中选择图片上传，并且在页面上显示所选的图片。按照官方文档的顺序顺利搭建微信的开发环境，图片能够顺利在相册中选择和上传，但是在Android机上能够正常显示所选的图片，在IOS上展位图片存在，可是图片却显示空白，这是怎么回事，原来在微信官网上有详细的解释，有两种解释方案：
（一）查看页面上引用的微信API的版本是否大于1.0.0
如页面上引用的js如下
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
改为
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
因为
1.2.0以下版本的JSSDK不再支持通过使用chooseImage api返回的localld以如：”img src=wxLocalResource://50114659201332”的方式预览图片。
适配建议：直接将JSSDK升级为1.2.0最新版本即可帮助页面自动适配，但在部分场景下可能无效，此时可以使用，注意只是部分场景下适配。
（二）在js文件下判断当前的手机系统是否使用的是WKWebview
1.微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核，需要网页开发者提前做好网站的兼容检查和适配。
2.此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题。具体可参考《iOS网页开发适配指南》
此时就要轮到getLocalImgData方法出场了，具体使用方法我在下面一步一步的实现：
第一步：通过ajax请求获取微信相关配置
$.ajax({
url: "/oauth/jsapi/sdk?url=" + encodeURIComponent(window.location.href),
type: "GET",
dataType: "json",
async: true,
beforeSend: function () {
new Alertparent('light', "loading", "请稍后...");
},
success: function (pross) {
//关闭弹出层
$('.mark').remove();
$('.alertwrap').remove();
var result = pross.data;
if(result){
wxAuthObject = result;
wxInit(wxAuthObject); //调用初始化微信的信息
}
},
error: function () {
//关闭弹出层
$('.mark').remove();
$('.alertwrap').remove();
new Alertparent("know", "error", "请求发送失败！")
$(".gonext").removeAttr("disabled");
rancode();
}
});
第二步：初始化微信的函数—— wxInit(wxAuthObject)
//配置微信
function wxInit(result) {
wx.config({
debug: false,
appId: result.appId,
timestamp: result.timestamp,
nonceStr: result.nonceStr,
signature: result.signature,
jsApiList: [
"chooseImage",
"previewImage",
"uploadImage",
"downloadImage"]
});
}
第三步：点击上传按钮调用微信接口
//用户发起图片上传请求
$(".uploadingimg_wxjssdk").on("click", function () {
var that = $(this);
//调用上传函数
wxchooseimges(that,serverids);
});
第四步：选择图片
//上传图片功能函数
function wxchooseimges(that,arr) {
wx.ready(function () {
//第一步 选择图片
wx.chooseImage({
count: 9, //可以实现多选
//count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var localIds = res.localIds;
/*判断ios是不是用的 wkwebview 内核*/
if (window.__wxjs_is_wkwebview){
for (var i = 0; i < localIds.length; i++){
wx.getLocalImgData({
localId:res.localIds[i],
success: function (res){
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
var uploadbutton = "<span class='upImg'></span>";
$(uploadbutton).insertBefore(that);
$(".deleteDom").on("click",function(){
$(this).parent().remove();
});
}
})
}
}else{ //如果不是用的wkwebview 内核 或者是用的安卓系统 执行下面的xunh
for (var i = 0; i < localIds.length; i++) {
var uploadbutton = "<span></span>";
$(uploadbutton).insertBefore(that);
}
$(".deleteDom").on("click",function(){
$(this).parent().remove();
});
}
syncUpload(localIds, arr);
}
});
});
}
其中
wx.getLocalImgData({
localId:res.localIds[i],
success: function (res){
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下
}
})
是基本套路。
三、结束语
这个问题困扰了我很久，希望对大家有所帮助，同时也欢迎大家提出问题。谢谢！
