【瑞模网】html微信内置浏览器点击图片放大，双指缩放，附源码（自测可用）

最新推荐文章于 2023-11-16 11:32:30 发布

原创

最新推荐文章于 2023-11-16 11:32:30 发布 · 369 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

本文介绍了如何在HTML中实现在微信内置浏览器中点击图片放大并支持双指缩放的功能，提供了原生JS和Vue两种页面加载后的调用方法，附带完整源码，经测试可用。

引用微信的JS

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

/*调用微信预览图片的方法*/
        funcReadImgInfo() {
            let imgs = [];
            //获取图文中全部的img标签对象
            let imgObj = document.getElementsByClassName('image_box');
            let l = imgObj.length;
            // 遍历获取url
            for (let i = 0; i < l; i++) {
                imgs.push(imgObj[i].src);
                //以下调用微信内置图片浏览组建
                imgObj[i].onclick = function () {
                    let nowImgurl = this.src;
                    //获取当前点击图片url 切记 url必须是 http
                    WeixinJSBridge.invoke("imagePreview", {
                        "urls": imgs,
                        "current": nowImgurl