• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

由于获取详情那些接口的豆瓣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_


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序开发基本框架及其限制与优化发布时间:2022-07-18
下一篇:
微信小程序开发发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap