微信小程序_自定义markdown的图片点击放大处理

@[TOC]

⭐ 前言

大家好，我是yma16，不止前端，本文将介绍微信小程序中 markdown的图片扫描功能实现。

⭐ markdown图片扫描功能实现

原理：微信小程序的previewImage方法支持预览图片且长按扫描二维码，所以只需要在markdown的图片点击事件添加这个动作即可实现

      wx.previewImage({
   
        current: url, // 当前显示图片的http链接
        urls: [url] // 需要预览的图片http链接列表
      })

查找元素

页面元素的样式 h2w__img

查看源码了解他的内部事件_tap

查看你markdown渲染图片，存在一个事件绑定_tap

添加扫描事件

new markdown时可注入事件tap

decode读取events的事件注册到global全局，view视图可使用_前缀的事件

在配置项入口添加

  /**
   * 转换text
   * @param {string} text 
   */
  changeMrkdownText(text) {
   
    const markdownText = this.towxml(text, 'markdown', {
   
      theme: 'light', //主题 dark 黑色，light白色，不填默认light
      events:{
   
        tap:(e)=>{
   
          console.log('e',e)
          if(e&&e.target&&e.target.dataset.data){
   
            const {
   attrs,tag}=e.target.dataset.data
            if(tag==='img'){
   
              const {
   src}=attrs
              wx.previewImage({
   
                current: src, // 当前显示图片的http链接
                urls: [src] // 需要预览的图片http链接列表
              })
            }
          }
        }
      }
    });
    return markdownText
  }

测试通过

测试点击图片，预览

点击二维码图片可识别

⭐结束

感谢阅读！