#**
微信小程式如何開發圖片下載功能
**
官方檔案不夠詳細，因此寫此博客，希望能解決初學者的一些問題
下面案例可供參考
一.所用到的api介紹（來自官方檔案）
-
DownloadTask wx.downloadFile(Object object)
下載檔案資源到本地，客戶端直接發起一個 HTTPS GET 請求，回傳檔案的本地臨時路徑 (本地路徑)，單次下載允許的最大檔案為 200MB，使用前請注意閱讀相關說明，
注意：請在服務端回應的 header 中指定合理的 Content-Type 欄位，以保證客戶端正確處理檔案型別， -
wx.saveImageToPhotosAlbum(Object object)
基礎庫 1.2.0 開始支持，低版本需做兼容處理，
呼叫前需要 用戶授權 scope.writePhotosAlbum
保存圖片到系統相冊， -
url規則：服務器域名請在 「小程式后臺-開發-開發設定-服務器域名」 中進行配置，配置時需要注意：
域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 協議；
域名不能使用 IP 地址（小程式的局域網 IP 除外）或 localhost；
可以配置埠，如 https://myserver.com:8080，但是配置后只能向 https://myserver.com:8080 發起請求，如果向 https://myserver.com、https://myserver.com:9091 等 URL 請求則會失敗，
如果不配置埠，如 https://myserver.com，那么請求的 URL 中也不能包含埠，甚至是默認的 443 埠也不可以，如果向 https://myserver.com:443 請求則會失敗，
域名必須經過 ICP 備案；
出于安全考慮，api.weixin.qq.com 不能被配置為服務器域名，相關API也不能在小程式內呼叫， 開發者應將 AppSecret 保存到后臺服務器中，通過服務器使用 getAccessToken 介面獲取 access_token，并呼叫相關 API；
不支持配置父域名，使用子域名
二、使用步驟
1.寫下標簽
首先在index.wxml中寫下按鈕，用來觸發保存圖片的函式：
<button bindtap="picture">圖片保存</button>
2.index.js代碼部分
代碼如下：這里采用的圖片的URL地址是bilibili的一個圖片鏈接，正好符合小程式開發檔案中URL的請求規則，因此可以進行使用
picture:function(){
wx.downloadFile({
url: 'https://i0.hdslb.com/bfs/archive/f2bcc13613635be63786cad5480d95ca5a0fa4f6.png@880w_388h_1c_95q',//圖片的地址
type: 'audio',
success:function(res){
const tempFilePath = res.tempFilePath //如果請求成功，則通過res中的tempFilePath 得到需要下載的圖片地址
console.log(tempFilePath); //方便查看，這里列印路徑，并且提示請求成功
console.log("請求到了");
wx.saveImageToPhotosAlbum({
filePath: tempFilePath, //設定下載圖片的地址
success:function(){console.log("保存成功"); //保存成功后進行的提示
}
})
}
})
}
當請求成功后，console將會顯示以下內容，同時彈出下載框
真機除錯，成功保存（這里可以發現其實真機中回傳的URL地址和開發工具中回傳的不同）
以上就是這塊的全部內容了，有不對的地方希望可以得到指正
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/204886.html
標籤：其他
下一篇：CSS浮動