微信公众号H5点击图片预览(可放大缩小)，用微信内置jssdk实现

在微信公众号H5里面可能会遇到点击图片预览，还可以放大缩小，微信内置有这个功能可以实现

用vue写项目的话，先

cnpm install weixin-js-sdk --save

接着给图片一个点击事件

<img src="" alt="" @click="preview()">data:{
url:""  //图片地址,
imgList:[]
}methods:{preview(){const _this = this;let nowImgUrl = this.url;if (!_this.imgList.includes(nowImgUrl)) {_this.imgList.push(nowImgUrl);}WeixinJSBridge.invoke("imagePreview", {urls: _this.imgList,current: nowImgUrl,})},
}

在微信开发者工具里面无法显示这个效果，只有在手机上才会有这个效果，所以建议在手机上调试

微信公众号H5点击图片预览(可放大缩小)，用微信内置jssdk实现相关推荐

v-viewer预览图的使用（图片预览旋转/放大缩小/上下切换等）
前言: 之前项目需求,需要找一个预览图的组件,最开始,找了vue-preview组件.因为vue-preview是直接引入 < vue-preview>这个标签,无法看到对组件里面的图片i ...
微信公众号h5网站，图片裁剪上传成功案例分享
1.裁剪插件 cropper 2.微信公众号内,微信sdk cropper挺简单的,如下: <VueCropper ref="cropper" ...
微信公众号开发之群发消息预览接口（十五）
预览接口[订阅号与服务号认证后均可用] 开发者可通过该接口发送消息给指定用户,在手机端查看消息的样式和排版.为了满足第三方平台开发者的需求,在保留对openID预览能力的同时,增加了对指定微信号发送预 ...
微信小程序现实点击图片预览功能
html部分 <image bindtap="showPic"></image> js部分 showPic: function () {// 预览图片,放大 ...
Vue实现图片预览（放大缩小拖拽）纯手写
这张图是显示的图片放大的一个预览情况,这里是参考预览操作实现的一个背景为黑色的部分,上层的图片可实现滚轮放大或者点击上部的放大镜图标进行放大,代码是基于Ant Design Vue框架的基础上这里先 ...
微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片背景解决方案文章参考背景微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: let a = document.crea ...
微信公众号，点击按钮打开pdf文件流，安卓跳转到浏览器里下载，ios可预览但默认不能下载
微信公众号,点击按钮打开pdf文件流,安卓跳转到浏览器里下载,ios可预览但默认不能下载注:在pc上开始时采用这两种方式是没有效果的,或者打开的是空页面,但上线到公众号是没有问题的!!!!!!!!! ...
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了
vue+webpack打包发布到线上后微信公众号H5部分打开白屏,刷新又好了 1.问题 2.原因这次可能的原因 3.过渡方案 4.解决方案 4.1 配置nginx服务器 4.2 前端打包保留两个版本 ...
【微信公众号H5授权登录】
微信公众号H5授权登录废话不多,直接上代码(这里只写代码的实现) 废话不多,直接上代码(这里只写代码的实现) 页面进来判断微信环境 onShow() {//设置初始值为false,微信环境下才能打开 ...

微信公众号H5点击图片预览(可放大缩小)，用微信内置jssdk实现

微信公众号H5点击图片预览(可放大缩小)，用微信内置jssdk实现相关推荐

最新文章

热门文章