全棧工程師之路-中級篇之小程序開發-第三章第四節點擊查看大圖,保存壁紙

由於獲取詳情那些接口的豆瓣API,都有權限限制。
所以,電影詳情頁面和電影搜索頁面我們就不做了。
接下來我們來看一些還蠻實用和有趣的小功能。

點擊查看大圖wx.previewImage

我們在moviecard模板中加入點擊事件。
這裏寫圖片描述
如圖所示,詳細的在前面的章節中已經講解過了。
然後在index.js中加入點擊查看大圖的函數
這裏寫圖片描述
保存預覽,點擊首頁的電影的圖片。
這裏寫圖片描述
我們可以看到圖片很模糊,那是因爲我們最早在綁定界面的時候,我們使用的是縮略圖。
所以修改一下util.js中,把高清圖也傳到界面上。
這裏寫圖片描述
然後在moviecard模板中修改綁定的數據:
<image class="cardimg" src="{{medium}}" catchtap="showImg" data-img-src="{{large}}"></image>
這裏寫圖片描述
這時候我們看到的就是高清圖片了。

保存圖片到相冊

這裏我們已經查看了電影海報,對於有些海報自己非常喜歡,
可以保存下來到相冊裏,所以這個功能也是挺實用的。
這個功能其實有一個更簡單的實現方式,那就是引導用戶。
iphone用戶可以引導他們使用長按保存功能,
android用戶可以引導他們使用右上角按鈕保存功能。
使用接口的話,是使用wx.saveImageToPhotosAlbum
這裏寫圖片描述
我們查閱官方的文檔,上面寫明瞭不支持網絡圖片路徑。
所以我們要先把圖片下載到本地(wx.downloadFile),再保存到相冊裏面。
而且還要獲取用戶權限。(wx.authorize)。
由於文章篇幅問題,我們這裏只提供思路,下一節課中我們詳細講解這個過程。
這節課不更新demo,下節課一起更新。

這節課的內容就到這裏結束了。
感謝您的閱讀。
我是莽夫,希望你開心。
如果你覺得本文對你有幫助,請掃描文末二維碼,支持博主原創。
希望大家關注我的個人公衆號ionic_
這裏寫圖片描述

發佈了75 篇原創文章 · 獲贊 61 · 訪問量 25萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章