一、寫(xiě)前
????????好長(zhǎng)時(shí)間沒(méi)寫(xiě)博客了峡迷，關(guān)鍵是最近實(shí)在是沒(méi)什么時(shí)間你虹，今天來(lái)給大家分享一個(gè)我在項(xiàng)目中遇到的大坑，幫助大家前做好防范夯辖。
二董饰、正文
????????最近公司在開(kāi)發(fā)微信公眾號(hào)的項(xiàng)目圆米，其中有一個(gè)功能是描述在手機(jī)端相冊(cè)中選擇圖片上傳榨咐，并且在頁(yè)面上顯示所選的圖片谴供。按照官方文檔的順序順利搭建微信的開(kāi)發(fā)環(huán)境齿坷，圖片能夠順利在相冊(cè)中選擇和上傳，但是在Android機(jī)上能夠正常顯示所選的圖片崎场，在IOS上展位圖片存在遂蛀，可是圖片卻顯示空白，這是怎么回事螃宙，原來(lái)在微信官網(wǎng)上有詳細(xì)的解釋所坯，有兩種解釋方案：
（一）查看頁(yè)面上引用的微信API的版本是否大于1.0.0
如頁(yè)面上引用的js如下
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
改為
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
因?yàn)?/p>
1.2.0以下版本的JSSDK不再支持通過(guò)使用chooseImage api返回的localld以如：”img src=wxLocalResource://50114659201332”的方式預(yù)覽圖片。
適配建議：直接將JSSDK升級(jí)為1.2.0最新版本即可幫助頁(yè)面自動(dòng)適配堂湖，但在部分場(chǎng)景下可能無(wú)效状土，此時(shí)可以使用，注意只是部分場(chǎng)景下適配斥季。
（二）在js文件下判斷當(dāng)前的手機(jī)系統(tǒng)是否使用的是WKWebview
1.微信iOS客戶端將于2017年3月1日前逐步升級(jí)為WKWebview內(nèi)核彼乌，需要網(wǎng)頁(yè)開(kāi)發(fā)者提前做好網(wǎng)站的兼容檢查和適配慰照。
2.此接口僅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接顯示圖片的問(wèn)題毒租。具體可參考《iOS網(wǎng)頁(yè)開(kāi)發(fā)適配指南》
此時(shí)就要輪到getLocalImgData方法出場(chǎng)了箱叁，具體使用方法我在下面一步一步的實(shí)現(xiàn)：
第一步：通過(guò)ajax請(qǐng)求獲取微信相關(guān)配置
$.ajax({
url: "/oauth/jsapi/sdk?url=" + encodeURIComponent(window.location.href),
type: "GET",
dataType: "json",
async: true,
beforeSend: function () {
new Alertparent('light', "loading", "請(qǐng)稍后...");
},
success: function (pross) {
//關(guān)閉彈出層
$('.mark').remove();
$('.alertwrap').remove();
var result = pross.data;
if(result){
wxAuthObject = result;
wxInit(wxAuthObject); //調(diào)用初始化微信的信息
}
},
error: function () {
//關(guān)閉彈出層
$('.mark').remove();
$('.alertwrap').remove();
new Alertparent("know", "error", "請(qǐng)求發(fā)送失斕枰健！")
$(".gonext").removeAttr("disabled");
rancode();
}
});
第二步：初始化微信的函數(shù)------ 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"]
});
}
第三步：點(diǎn)擊上傳按鈕調(diào)用微信接口
//用戶發(fā)起圖片上傳請(qǐng)求
$(".uploadingimg_wxjssdk").on("click", function () {
var that = $(this);
//調(diào)用上傳函數(shù)
wxchooseimges(that,serverids);
});
第四步：選擇圖片
//上傳圖片功能函數(shù)
function wxchooseimges(that,arr) {
wx.ready(function () {
//第一步 選擇圖片
wx.chooseImage({
count: 9, //可以實(shí)現(xiàn)多選
//count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var localIds = res.localIds;
/*判斷ios是不是用的 wkwebview 內(nèi)核*/
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數(shù)據(jù)螟够，可以用img標(biāo)簽顯示
localData = localData.replace('jgp', 'jpeg');//iOS 系統(tǒng)里面得到的數(shù)據(jù)峡钓，類型為 image/jgp,因此需要替換一下
var uploadbutton = "<span class='upImg'></span>";
$(uploadbutton).insertBefore(that);
$(".deleteDom").on("click",function(){
$(this).parent().remove();
});
}
})
}
}else{ //如果不是用的wkwebview 內(nèi)核 或者是用的安卓系統(tǒng) 執(zhí)行下面的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數(shù)據(jù)寞宫，可以用img標(biāo)簽顯示
localData = localData.replace('jgp', 'jpeg');//iOS 系統(tǒng)里面得到的數(shù)據(jù)拉鹃，類型為 image/jgp,因此需要替換一下
}
})
是基本套路。
三钥屈、結(jié)束語(yǔ)
????????這個(gè)問(wèn)題困擾了我很久坝辫，希望對(duì)大家有所幫助，同時(shí)也歡迎大家提出問(wèn)題阀溶。謝謝！
