首頁 > 微信小程式 > 小程式開發 > 關於微信JS-SDK選取手機照片上傳的功能

關於微信JS-SDK選取手機照片上傳的功能

不言
發布: 2018-06-27 14:24:52
原創
2449 人瀏覽過

這篇文章主要為大家詳細介紹了微信JS-SDK選取手機照片上傳功能,具有一定的參考價值,有興趣的小夥伴們可以參考一下

專案中遇到需要選取照片上傳的需求,因為網頁是運行在微信的瀏覽器裡面,所以用微信的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微信開發技巧總結》,歡迎大家學習閱讀。

為大家推薦現在關注度比較高的微信小程式教學一篇:《微信小程式開發教學》小編為大家精心整理的,希望喜歡。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! 相關推薦:

######微信小程式中支付後呼叫SDK的非同步通知及驗證處理訂單方法###############微信小程式中的網路請求(post請求與get請求)#########################

以上是關於微信JS-SDK選取手機照片上傳的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板