欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信JS-SDK選取手機(jī)照片上傳功能

 更新時(shí)間:2017年04月21日 15:15:17   作者:Monkey丶軍  
這篇文章主要為大家詳細(xì)介紹了微信JS-SDK選取手機(jī)照片上傳功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

項(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)文章

最新評(píng)論