一、寫前
????????好長時間沒寫博客了，關(guān)鍵是最近實在是沒什么時間，今天來給大家分享一個我在項目中遇到的大坑，幫助大家前做好防范。
二、正文
????????最近公司在開發(fā)微信公眾號的項目，其中有一個功能是描述在手機(jī)端相冊中選擇圖片上傳，并且在頁面上顯示所選的圖片。按照官方文檔的順序順利搭建微信的開發(fā)環(huán)境，圖片能夠順利在相冊中選擇和上傳，但是在Android機(jī)上能夠正常顯示所選的圖片，在IOS上展位圖片存在，可是圖片卻顯示空白，這是怎么回事，原來在微信官網(wǎng)上有詳細(xì)的解釋，有兩種解釋方案：
（一）查看頁面上引用的微信API的版本是否大于1.0.0
如頁面上引用的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>
因為
1.2.0以下版本的JSSDK不再支持通過使用chooseImage api返回的localld以如：”img src=wxLocalResource://50114659201332”的方式預(yù)覽圖片。
適配建議：直接將JSSDK升級為1.2.0最新版本即可幫助頁面自動適配，但在部分場景下可能無效，此時可以使用，注意只是部分場景下適配。
（二）在js文件下判斷當(dāng)前的手機(jī)系統(tǒng)是否使用的是WKWebview
1.微信iOS客戶端將于2017年3月1日前逐步升級為WKWebview內(nèi)核，需要網(wǎng)頁開發(fā)者提前做好網(wǎng)站的兼容檢查和適配。
2.此接口僅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接顯示圖片的問題。具體可參考《iOS網(wǎng)頁開發(fā)適配指南》
此時就要輪到getLocalImgData方法出場了，具體使用方法我在下面一步一步的實現(xiàn)：
第一步：通過ajax請求獲取微信相關(guān)配置
$.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) {
//關(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", "請求發(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ào)用微信接口
//用戶發(fā)起圖片上傳請求
$(".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, //可以實現(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é)束語
????????這個問題困擾了我很久，希望對大家有所幫助，同時也歡迎大家提出問題。謝謝！
