小程序开发-第三章第四节点击查看大图,保存壁纸-全栈工程师之路-中级篇

简介: 小程序开发-第三章第四节点击查看大图,保存壁纸-全栈工程师之路-中级篇

由于获取详情那些接口的豆瓣API,都有权限限制。
所以,电影详情页面和电影搜索页面我们就不做了。
接下来我们来看一些还蛮实用和有趣的小功能。


点击查看大图wx.previewImage

我们在moviecard模板中加入点击事件。

image.png

如图所示,详细的在前面的章节中已经讲解过了。
然后在index.js中加入点击查看大图的函数

image.png


保存预览,点击首页的电影的图片。

image.png


我们可以看到图片很模糊,那是因为我们最早在绑定界面的时候,我们使用的是缩略图。
所以修改一下util.js中,把高清图也传到界面上。

image.png


然后在moviecard模板中修改绑定的数据:
<image class="cardimg" src="{{medium}}" catchtap="showImg" data-img-src="{{large}}"></image>

image.png


这时候我们看到的就是高清图片了。


保存图片到相册

这里我们已经查看了电影海报,对于有些海报自己非常喜欢,
可以保存下来到相册里,所以这个功能也是挺实用的。
这个功能其实有一个更简单的实现方式,那就是引导用户。


iphone用户可以引导他们使用长按保存功能,

android用户可以引导他们使用右上角按钮保存功能。

使用接口的话,是使用wx.saveImageToPhotosAlbum

image.png

我们查阅官方的文档,上面写明了不支持网络图片路径。
所以我们要先把图片下载到本地(wx.downloadFile),再保存到相册里面。
而且还要获取用户权限。(wx.authorize)。


由于文章篇幅问题,我们这里只提供思路,下一节课中我们详细讲解这个过程。
这节课不更新demo,下节课一起更新。

这节课的内容就到这里结束了。
感谢您的阅读。
我是莽夫,希望你开心。

目录
相关文章
|
5月前
|
小程序
小程序中点击子元素事件而不触发父元素的点击事件
小程序中点击子元素事件而不触发父元素的点击事件
93 0
|
5月前
|
小程序 前端开发 JavaScript
小程序点击按钮出现和隐藏遮罩层
小程序点击按钮出现和隐藏遮罩层
158 0
|
7月前
|
小程序 JavaScript API
小程序点击复制功能制作
小程序点击复制功能制作
125 0
|
小程序 JavaScript 开发者
|
20天前
|
小程序
微信小程序实现点击复制(wx.setClipboardData)
微信小程序实现点击复制(wx.setClipboardData)
7 0
|
5月前
|
小程序 JavaScript
小程序点击按钮弹出可填写框
小程序点击按钮弹出可填写框
64 0
|
5月前
|
小程序 JavaScript
小程序鼠标点击按钮(改变背景颜色字体)
小程序鼠标点击按钮(改变背景颜色字体)
68 0
|
2月前
|
小程序 vr&ar
一个小动作,点击量上涨17倍,有小程序就能用!
一个小动作,点击量上涨17倍,有小程序就能用!
21 0
|
4月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
|
5月前
|
小程序 JavaScript 定位技术
小程序点击指定地址按钮直接打开地图导航
小程序点击指定地址按钮直接打开地图导航
125 0