項目中遇到需要選取照片上傳的需求，因為網頁運行在微信的瀏覽器里面，所以用微信的 js-sdk 提供的選取照片功能，來進行項目開發。實際開發中需要用到微信web開發者工具，詳細參考鏈接：https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html。
1.配置微信JS-SDK相關文件
1）、JSSDk使用最新的1.2.0版本：https://res.wx.qq.com/open/js/jweixin-1.2.0.js。
ios網頁開發適配問題：
變化：1.2.0以下版本的JSSDK不再支持通過使用chooseImage api返回的localld以如："img src=wxLocalResource://50114659201332”的方式預覽圖片。
適配建議：直接將JSSDK升級為1.2.0最新版本即可幫助頁面自動適配，但在部分場景下可能無效，此時可以使用getLocalImgData 接口來直接獲取數據。
（后附詳解代碼）
2）、jsapiSign.js文件：
/** * 使用jssdk接口的頁面，必須引用該文件 * actionUrl：后臺服務請求地址 * url：微信jssdk授權頁面地址 */$.post("/getJsapiSign", {'url':location.href.split('#')[0]}, function(data) { wx.config({ debug : false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。 appId : data.appid, // 必填，公眾號的唯一標識 timestamp : data.timestamp, // 必填，生成簽名的時間戳 nonceStr : data.noncestr, // 必填，生成簽名的隨機串 signature : data.signature,// 必填，簽名，見附錄1 jsApiList : [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'translateVoice', 'startRecord', 'stopRecord', 'onRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard', 'getLocalImgData' ] }); wx.error(function(res) { alert("wx.config加載失敗"); });}, 'json');2.具體實現過程
1）、選取照片
這里使用微信 js-sdk 的 chooseImage 方法，得到照片在本地存儲的 id，十分簡單：
2）、獲取照片數據
根據微信的官方開發文檔，得到的 localId 可以直接作為 img 元素的 src 屬性進行顯示
3）、照片上傳
這里使用微信 js-sdk 的 uploadImage 方法
wx.chooseImage({ count: 1, // 默認9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有 success: function (res) { var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片 wx.uploadImage({ localId: localIds[0], // 需要上傳的圖片的本地ID，由chooseImage接口獲得 isShowProgressTips: 1, // 默認為1，顯示進度提示 success: function (res) { var medias = {'lid':localIds[0].toString(), 'sid':res.serverId}; $('#img_media').attr('src', medias.lid); },fail:function(res){ alert("上傳失敗"); } }); }});3.iOS WKWebview 網頁開發適配
JSAPI相關適配
1）、將不再支持cache
變化：在WKWebview中將暫不支持cache jsapi。
適配建議：所有使用此api的開發者可去掉頁面相關邏輯。
2）、頁面通過LocalID預覽圖片
變化：1.2.0以下版本的JSSDK不再支持通過使用chooseImage api返回的localld以如：”img src=wxLocalResource://50114659201332”的方式預覽圖片。
適配建議：直接將JSSDK升級為1.2.0最新版本即可幫助頁面自動適配，但在部分場景下可能無效，此時可以使用getLocalImgData 接口來直接獲取數據。
（目前JSSDk線上版本是 1.0.0 和 1.1.0，更新版本為1.2.0 ，https://res.wx.qq.com/open/js/jweixin-1.2.0.js ）
if (window.__wxjs_is_wkwebview) { wx.getLocalImgData({ localId: localIds[0], // 圖片的localID success: function (res) { var localData = res.localData; // localData是圖片的base64數據，可以用img標簽顯示 localData = localData.replace('jgp', 'jpeg');//iOS 系統里面得到的數據，類型為 image/jgp,因此需要替換一下 $('#img_media').attr('src', localData); },fail:function(res){ alert("顯示失敗"); } });}三、有使用JSSDK，并且使用了wx.config進行權限授權需關注jsapi調用的失敗問題
變化：WKWebview的內部實現變更使我們對微信內的頁面jsapi權限管理做了一定邏輯上的調整，有極小可能會發生以前授權正常的jsapi獲取權限不正常，從而導致調用jsapi失敗。
適配建議：
1. iOS微信6.5.1，WKWebview在此版本中已知有以下問題：頁面使用HTML5的History API pushState; popstate; replaceState等控制頁面導航（典型的如單應用頁面），同時使用JSSDK的wx.config為jsapi授權，此時大幾率會出現jsapi因為無權限而調用失敗的問題。 在6.5.1中頁面若可能的情況下，可使用Anchor hash技術替換History技術來解決此問題。
2. iOS微信6.5.2及其之后版本，將不會存在以上問題，但不能100%確認有使用到 history或hash技術更改頁面導航地址的頁面完全沒有此類問題，依然需要開發者注意關注此類問題。
本文已被整理到了《JavaScript微信開發技巧匯總》，歡迎大家學習閱讀。
為大家推薦現在關注度比較高的微信小程序教程一篇：《微信小程序開發教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
