自学小程序，我教你呀（五）实现点击图片放大预览长按保存下载

前言

其实很多手机，只要你点了预览图片，然后长按图片就能够实现保存到手机和分享给朋友。

实现步骤

微信提供了预览图片的接口，其中urls是必填的类型

step1 wxml文件里添加点击事件

<image class='img' src='{{imgUrl}}' bindtap='clickImg'></image>

解读：

src：存放当前图片的路径

bindtap：自定义点击事件

step2 给图片添加一个点击事件

根据wxml里的clickImg事件，创建一个点击事件：

注意参数里的urls，是一个数组

data: {imgUrl:'/images/img.jpg'  //图片路径
},
//点击事件
clickImg: function(e){var imgUrl = this.data.imgUrl;wx.previewImage({urls: [imgUrl], //需要预览的图片http链接列表，注意是数组current: '', // 当前显示图片的http链接，默认是第一个success: function (res) { },fail: function (res) { },complete: function (res) { },})
},

step3 测试

使用微信开发者工具测试，点击图片后查看调试器，如果没有报错，说明已经成功了！

当然，最好是使用手机来测试！

往期文章推荐

自学小程序，我教你呀（一）简单倒计时
自学小程序，我教你呀（二）小程序实现电商秒杀倒计时效果
自学小程序，我教你呀（三）实现大转盘仿天猫抽奖跑马灯效果
自学小程序，我教你呀（四）微信开发工具常用快捷键

小程序效果演示

自学小程序，我教你呀（五）实现点击图片放大预览长按保存下载相关推荐

微信小程序系列——点击图片放大预览
需求开发的时候,把图片放到页面上,点击图片没有任何反应,不能放大也不能缩小这怎么能行!!! 所以需求来了:点击图片能够把图片弹出来,这样就能放大图片看细节了! 实现步骤微信提供了预览图片的接口, ...
小程序点击图片放大预览
Banner图点击预览 wxml  <view class='home-banner'><swiper indicator-dots='tr ...
微信小程序点击图片放大预览，新页面中全屏预览图片
第一步:在wxml中定义image组件,并设置绑定事件. <image src="{{priceUrl}}" bindtap="imgClick"> ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...
微信小程序图片放大预览效果的实现
效果预览效果图有点快,但是可以大致看出来效果了.我再给大家描述下吧一个页面有3张图片,点击其中任意一张都可以放大预览.然后在预览的时候,左右滑动,还可以看另外两张图片. 话不多说,直接上代码 1, ...
小程序实现图片放大预览功能
uniapp 微信小程序实现图片放大预览功能实现效果图如下主要实现代码 <view class="text_img"><image :src="i ...
微信小程序：收藏、客服、分享、加入购物车、图片放大预览
微信小程序:收藏.客服.分享.加入购物车.图片放大预览微信小程序包含功能 ·轮播 ·图片放大预览 ·收藏 ·客服 ·加入购物车在goods_detail下的index.wxml写页面代码 < ...
微信小程序：previewImage实现图片放大预览效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言前言记录一下做项目的过程中遇到的图片放大预览效果的实现实现的是点击图片可以放大预览,这个效果在京东淘宝都可以看到 ...
微信小程序：点击图片进行预览
在开发需求中,经常有类似与九宫格的图片展示,当点击图片时进行图片的预览,如果多图的情况还可以左右滑动. 小程序中具体实现效果如下: WXML <view class='imgList'> ...