|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 這篇文章主要為大家詳細介紹了微信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中文網! 相關推薦: 以上就是關于微信JS-SDK選取手機照片上傳的功能的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!