Mrcdh技术博客 Mrcdh技术博客
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Mrcdh

全栈开发小学生
首页
  • Html5
  • Javascript
  • Nodejs
  • electron
  • Android
  • 微信公众号
  • 框架
  • 其他
  • Mysql
  • PHP
  • Python
  • java
  • Gulp
  • 其它
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Html5

  • JavaScript

  • Nodejs

  • express

  • electron

  • Android

  • 微信公众号

    • 微信浏览器内使用微信自带图片查看器放大查看图片
    • 引用公众号的图片无法正确显示
    • 微信公众号开发常见问题
  • 框架

  • 其他

  • selenium

  • Sequelize

  • 大前端
  • 微信公众号
mrcdh
2020-10-23

微信浏览器内使用微信自带图片查看器放大查看图片

在微信内打开网址,网站内容中的图片是不能进行放大操作的,需要使用微信的JSSDK中的方法进行实现。

首先引入weixin.js

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
1

然后遍历图片,给图片添加点击事件,调用微信的方法查看图片。

<script>
  function imageInit(){
    var imgList = [];
    // 获取容器内所有的img元素
    var imgObjs = $("#content img");
    // 遍历img元素
    for(var i=0; i<imgObjs.length; i++){
      imgList.push(imgObjs.eq(i).attr('src'));
      // 给img元素添加点击事件
      imgObjs.eq(i).click(function(){
        var imgUrl = $(this).attr('src');
        wx.previewImage({
          current: imgUrl , // 当前显示图片的http链接
          urls: imgList     // 需要预览的图片http链接列表
        });
      });
    }
  }
  
  window.onload = function(){
    imageInit();
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#微信公众号
上次更新: 2023/09/22, 16:54:32
Android常见问题
引用公众号的图片无法正确显示

← Android常见问题 引用公众号的图片无法正确显示→

最近更新
01
uniapp常见问题
03-19
02
Vue3项目搭建
12-25
03
使用pnpm的monorepo组织项目
11-01
更多文章>
Theme by Vdoing | Copyright © 2020-2025 Mrcdh | 苏ICP备2020058908号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×