微信JS-SDK選取手機(jī)照片上傳功能
項(xiàng)目中遇到需要選取照片上傳的需求,因?yàn)榫W(wǎng)頁(yè)運(yùn)行在微信的瀏覽器里面,所以用微信的 js-sdk 提供的選取照片功能,來(lái)進(jìn)行項(xiàng)目開(kāi)發(fā)。實(shí)際開(kāi)發(fā)中需要用到微信web開(kāi)發(fā)者工具,詳細(xì)參考鏈接:https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html。
1.配置微信JS-SDK相關(guān)文件
1)、JSSDk使用最新的1.2.0版本:https://res.wx.qq.com/open/js/jweixin-1.2.0.js。
ios網(wǎng)頁(yè)開(kāi)發(fā)適配問(wèn)題:
變化: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í)可以使用getLocalImgData 接口來(lái)直接獲取數(shù)據(jù)。
(后附詳解代碼)
2)、jsapiSign.js文件:
/** * 使用jssdk接口的頁(yè)面,必須引用該文件 * actionUrl:后臺(tái)服務(wù)請(qǐng)求地址 * url:微信jssdk授權(quán)頁(yè)面地址 */ $.post("/getJsapiSign", {'url':location.href.split('#')[0]}, function(data) { wx.config({ debug : false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái),若要查看傳入的參數(shù),可以在pc端打開(kāi),參數(shù)信息會(huì)通過(guò)log打出,僅在pc端時(shí)才會(huì)打印。 appId : data.appid, // 必填,公眾號(hào)的唯一標(biāo)識(shí) timestamp : data.timestamp, // 必填,生成簽名的時(shí)間戳 nonceStr : data.noncestr, // 必填,生成簽名的隨機(jī)串 signature : data.signature,// 必填,簽名,見(jiàn)附錄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.具體實(shí)現(xiàn)過(guò)程
1)、選取照片
這里使用微信 js-sdk 的 chooseImage 方法,得到照片在本地存儲(chǔ)的 id,十分簡(jiǎn)單:
2)、獲取照片數(shù)據(jù)
根據(jù)微信的官方開(kāi)發(fā)文檔,得到的 localId 可以直接作為 img 元素的 src 屬性進(jìn)行顯示
3)、照片上傳
這里使用微信 js-sdk 的 uploadImage 方法
wx.chooseImage({ count: 1, // 默認(rèn)9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有 success: function (res) { var localIds = res.localIds; // 返回選定照片的本地ID列表,localId可以作為img標(biāo)簽的src屬性顯示圖片 wx.uploadImage({ localId: localIds[0], // 需要上傳的圖片的本地ID,由chooseImage接口獲得 isShowProgressTips: 1, // 默認(rèn)為1,顯示進(jìn)度提示 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 網(wǎng)頁(yè)開(kāi)發(fā)適配
JSAPI相關(guān)適配
1)、將不再支持cache
變化:在WKWebview中將暫不支持cache jsapi。
適配建議:所有使用此api的開(kāi)發(fā)者可去掉頁(yè)面相關(guān)邏輯。
2)、頁(yè)面通過(guò)LocalID預(yù)覽圖片
變化: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í)可以使用getLocalImgData 接口來(lái)直接獲取數(shù)據(jù)。
(目前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數(shù)據(jù),可以用img標(biāo)簽顯示 localData = localData.replace('jgp', 'jpeg');//iOS 系統(tǒng)里面得到的數(shù)據(jù),類(lèi)型為 image/jgp,因此需要替換一下 $('#img_media').attr('src', localData); },fail:function(res){ alert("顯示失敗"); } }); }
三、有使用JSSDK,并且使用了wx.config進(jìn)行權(quán)限授權(quán)需關(guān)注jsapi調(diào)用的失敗問(wèn)題
變化:WKWebview的內(nèi)部實(shí)現(xiàn)變更使我們對(duì)微信內(nèi)的頁(yè)面jsapi權(quán)限管理做了一定邏輯上的調(diào)整,有極小可能會(huì)發(fā)生以前授權(quán)正常的jsapi獲取權(quán)限不正常,從而導(dǎo)致調(diào)用jsapi失敗。
適配建議:
1. iOS微信6.5.1,WKWebview在此版本中已知有以下問(wèn)題:頁(yè)面使用HTML5的History API pushState; popstate; replaceState等控制頁(yè)面導(dǎo)航(典型的如單應(yīng)用頁(yè)面),同時(shí)使用JSSDK的wx.config為jsapi授權(quán),此時(shí)大幾率會(huì)出現(xiàn)jsapi因?yàn)闊o(wú)權(quán)限而調(diào)用失敗的問(wèn)題。 在6.5.1中頁(yè)面若可能的情況下,可使用Anchor hash技術(shù)替換History技術(shù)來(lái)解決此問(wèn)題。
2. iOS微信6.5.2及其之后版本,將不會(huì)存在以上問(wèn)題,但不能100%確認(rèn)有使用到 history或hash技術(shù)更改頁(yè)面導(dǎo)航地址的頁(yè)面完全沒(méi)有此類(lèi)問(wèn)題,依然需要開(kāi)發(fā)者注意關(guān)注此類(lèi)問(wèn)題。
本文已被整理到了《JavaScript微信開(kāi)發(fā)技巧匯總》,歡迎大家學(xué)習(xí)閱讀。
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開(kāi)發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript克隆元素樣式的實(shí)現(xiàn)代碼
這是一個(gè)實(shí)驗(yàn)用的玩意,它可以克隆指定元素的最終樣式,并包裝成一個(gè)css類(lèi),它還可以證明Oprea 11.10 是個(gè)混球2011-10-10js中對(duì)函數(shù)設(shè)置默認(rèn)參數(shù)值的3種方法
這篇文章主要介紹了js中對(duì)函數(shù)設(shè)置默認(rèn)參數(shù)值的3種方法嗎,3種方法都具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-10-10前端使用JS內(nèi)置Blob實(shí)現(xiàn)下載各種形式的文件實(shí)例
通過(guò)使用JavaScript我們可以很方便地實(shí)現(xiàn)文件的下載功能,這篇文章主要給大家介紹了關(guān)于前端使用JS內(nèi)置Blob實(shí)現(xiàn)下載各種形式文件的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06javascript String 的擴(kuò)展方法集合
String 的擴(kuò)展方法集合,可以是javascript對(duì)string的功能更多2008-06-06js style動(dòng)態(tài)設(shè)置table高度
設(shè)置table高度想必大家都會(huì),直接在table標(biāo)簽中設(shè)置下不就行了嗎?這是靜態(tài)的,如果要?jiǎng)討B(tài)設(shè)置你會(huì)嗎?下面的實(shí)例將教會(huì)大家2014-10-10