html5+實現一鍵分享多張圖片到朋友圈
阿新 • • 發佈：2019-01-31
示例圖
程式碼部分
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="HandheldFriendly" content="true"/> <meta name="MobileOptimized" content="320"/> <title>呼叫系統分享</title> <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var pictures = []; //分享的圖片資料陣列 var picNum = 0; //本地圖片已經新增到上面陣列中的數量，包括下載成功或者失敗的 var picLength = 0; //後臺請求獲取的圖片陣列長度 var relativePathArr = []; //分享完成後刪除下載的本地圖片 mui.init(); //mui初始化 mui.plusReady(function() { var shareSystem = document.getElementById("shareSystem"); shareSystem.addEventListener("tap",function(){ //每次點選都先重置變數 pictures=[]; picNum = 0; picLength = 0; relativePathArr = []; //模擬請求介面獲取圖片陣列 var imgArr = [ "http://v.ruthout.com/files/course/2017/05-08/133735f9295e681844.jpg", "http://v.ruthout.com/files/course/2017/05-02/101138a5ce28404936.jpg", "http://v.ruthout.com/files/course/2017/04-12/180859bee06e205896.jpg", "http://v.ruthout.com/files/course/2017/04-06/095527f140c2257143.jpg", ] picLength = imgArr.length; for(var i=0;i<picLength;i++){ setImg("img"+i , imgArr[i]); } }) }); /* *1.從本地獲取,如果本地存在,則直接設定圖片 *2.如果本地不存在則網路下載,快取到本地,再設定圖片 * */ function setImg(imgId, loadUrl) { if (imgId == null || loadUrl == null) return; //圖片下載成功 預設儲存在本地相對路徑的"_downloads"資料夾裡面, 如"_downloads/logo.jpg" var filename = loadUrl.substring(loadUrl.lastIndexOf("/") + 1, loadUrl.length); var relativePath = "_downloads/" + filename; relativePathArr.push(relativePath); //儲存起來等分享結束後刪除資料使用 //檢查圖片是否已存在 plus.io.resolveLocalFileSystemURL(relativePath, function(entry) { console.log("存在") //如果檔案存在,則直接設定本地圖片 setImgFromLocal(imgId, relativePath); }, function(e) { console.log("下載") //如果檔案不存在,聯網下載圖片 setImgFromNet (imgId,loadUrl,relativePath); }); } /*給圖片標籤<img>設定本地圖片 * imgId 圖片標籤<img>的id * relativePath 本地相對路徑 例如:"_downloads/logo.jpg" */ function setImgFromLocal(imgId, relativePath) { //本地相對路徑("_downloads/logo.jpg")轉成SD卡絕對路徑("/storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/downloads/logo.jpg"); var sd_path = plus.io.convertLocalFileSystemURL(relativePath); pictures.push("file://"+sd_path); picNum++; console.log(picLength); console.log(picNum); //這裡要注意picNu ++的地方，要在圖片下載完成後或者失敗後； if(picLength == picNum){ console.log("開始分享") //確定全部圖片都下載到本地後調分享 var msg = { pictures:pictures }; plus.share.sendWithSystem(msg, function(){ for(var i=0;i<relativePathArr.length;i++){ if (relativePathArr[i]!=null) delFile(relativePathArr[i]); } }, function(e){ for(var i=0;i<relativePathArr.length;i++){ if (relativePathArr[i]!=null) delFile(relativePathArr[i]); } }); } } /*聯網下載圖片,並設定給<img>*/ function setImgFromNet (imgId,loadUrl,relativePath) { //先設定下載中的預設圖片 //建立下載任務 var dtask = plus.downloader.createDownload(loadUrl, {}, function(d, status) { if (status == 200) { //下載成功 // console.log("下載成功"); setImgFromLocal(imgId, d.filename); } else { picNum++; // console.log("下載失敗"); //下載失敗,需刪除本地臨時檔案,否則下次進來時會檢查到圖片已存在 //dtask.abort();//文件描述:取消下載,刪除臨時檔案;(但經測試臨時檔案沒有刪除,故使用delFile()方法刪除); if (relativePath!=null) delFile(relativePath); } }); //啟動下載任務 dtask.start(); } /*刪除指定檔案*/ function delFile(relativePath) { plus.io.resolveLocalFileSystemURL(relativePath, function(entry) { entry.remove(function(entry) { console.log("檔案刪除成功"); }, function(e) { console.log("檔案刪除失敗" + relativePath); }); }); } /*根據id查詢元素*/ function $id(id) { return document.getElementById(id); } </script> <style type="text/css"> #shareSystem{ width: 100%; background: #ef7550; margin-top: 100px; line-height: 50px; text-align: center; font-size: 18px; color: #fff; } </style> </head> <body> <div class="button" id="shareSystem">點我一鍵分享朋友圈</div> </body> </html>