Adinnet-Web Adinnet-Web
首页
  • 技术沉淀

    • 技术沉淀
  • 前端文章

    • JavaScript
  • 前端笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 实用技巧
收藏
  • 分类
  • 标签
  • 归档
首页
  • 技术沉淀

    • 技术沉淀
  • 前端文章

    • JavaScript
  • 前端笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 实用技巧
收藏
  • 分类
  • 标签
  • 归档
  • JavaScript文章

  • 学习笔记

  • 技术沉淀

    • CSS矩形绘制
    • 仿微信通讯录
    • 微信小程序订阅消息
    • 保存海报
    • 微信小程序页面弹框
    • 微信小程序在指定距离范围内签到
    • h5嵌套u3d,使用iframe进行交互
    • 前端主导文件处理方法
    • 图片压缩方法封装
    • 金额大写函数
    • 前端主导的小程序一键导航功能
    • uniapp富文本组件(只支持H5)
    • uniapp二次确认弹框组件(依赖于uview)
    • 无缝滚动插件(vue3)
    • H5与unity通信(只针对unity嵌套H5)
    • 辅助触控
    • 关系图
    • h5&svg点赞动效
    • iframe高精地图文件预览
    • 自适应横向瀑布流布局
    • 考试功能
    • 仿小说翻页
    • 富文本
    • h5唤醒App
    • vue3 Count-to数字翻动
    • 小程序图片转base64
    • 第三方应用跳转微信小程序
    • 圆角TabBar
    • 大屏Header
    • Echarts中国地图
    • 使用computed拦截v-model
    • 消息订阅与发布
    • Html相对路径页面跳转
    • Vite打包本地访问
    • H5主题切换
    • 移动端列表分页
    • 每次进入页面都触发的功能(v3)
    • 智能导诊
    • js中几个优雅的运算符使用技巧
    • 其他CSS伪元素
    • 微信浏览器保存canvas海报
    • uniappH5手动拖拽缩放自定义绘制海报
    • uniapp小程序盒子拖拽排序
    • 微信小程序地图的使用
    • css静态漏斗绘制
    • 微信小程序图片流处理
    • ios时间问题
    • 文字围绕效果
    • 表格树动态计算
    • React中useEffect用法
    • React Hooks 陷阱
    • Naive UI修改默认样式
    • vue 根据div id 滚动到指定view到可视视图中
    • js将[1,2,3]排列组合成[1.12.123]
    • 移动端如何加载vite导出dist包
    • TS探索接口、泛型和自定义类型
    • WebSocket中加入Token
    • 幂方程指数衰减
    • pageSpy
    • 表格多条件搜索
    • axios get 请求 url 转码 空格转成+,导致请求失败
    • NaiveUI使用Message组件遇到的问题记录
    • 小程序多盒子拖拽排序
    • 对象快速筛key方法
    • 倒计时
    • nuxt3中的useAsyncData使用详解
    • nuxt3文件式路由
    • 播放amr格式音频
    • echarts瀑布图
    • vue中使用vueuse进行文件导出
    • 分享一个数据整理方法
    • naiveui表格shift多选
    • 数组递归转tree
    • 自定义指令图片懒加载
    • 将数组里面的对象转换成我们需要的键值对
    • 亚马逊云s3上传
    • 上拉加载更多封装
    • JS设计模式总结笔记
    • 适配移动端页面顶部安全区域
    • 【CryptoJS】使用介绍
    • 微信小程序富文本图片点击放大
    • 微信小程序省市区级联选择
    • uniapp拖动排序插件
    • element ui 的树形结构懒加载,局部更新
    • 表单搜索过滤空值
    • 判断设备类型
    • tsconfig配置打包问题
    • vant-uploader上传组件添加长按保存图片
    • BroadcastChannel跨页面通信
    • pnpm安装问题
    • echart阶梯图形绘制
    • js根据对象拼接参数
    • 集成免密登录
    • 输入框输入数字限制
    • js控制全局css变量
    • 流程图
    • 修改npm包
    • tsx在vue3中的应用
    • 109video播放视频流
    • echart默认展示某个点的tooltip
    • 大屏适配几种方案
    • 表单低代码自定义列表页
    • 表单低代码列表页配置端代码
    • 低代码平台使用的一些好用的js方法
    • vue3cookie的使用
    • 原生js下载文件
    • stompjs 创建socket,断线重连机制
    • iframe作为内嵌网页cookie设置
    • 前端对文件内容解析生成特定算法哈希值方法
    • vue3中前端自定义命名文件名称下载文件的方法
    • 前端项目中权限判断的方法配合路由守卫使用
    • 原生table:表格table中thead固定,tbody超出高度出现滚动条
    • vue中使用原生的方法
    • vue3中amchart的初步使用
    • base64图片加水印
    • 手写签名
    • base64转doc文件
  • 前端
  • 技术沉淀
黄枫萍
2024-08-17

微信小程序富文本图片点击放大

# js文件

    
data: {
    // 文本内容
    content:'' ,
    // 图片列表
    imgArr:[]
  },
 
 
// 获取富文本内容
  getRichContent(initForm:object){
    getRichContentApi(initForm).then((res:any)=>{
      const { data, msg, result} =res
      if(result==1){
        let mycontent = JSON.parse(JSON.stringify(data.content))
        // 解决图片自适应
        mycontent = mycontent.replace(/\<img/gi, '<img width="100%" height="auto"');
        // 解决图片之间的空隙
        mycontent = mycontent.replace(/style=""/gi, 'style="display:block; width="100%"; height="auto""');
 
        // 主要代码为后面预览图片准备
        let imgArr = [];
        let regex = new RegExp(/<img.*?(?:>|\/>)/gi); // 匹配所有图片
        let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配src图片
        let arrsImg = mycontent.match(regex); // mycontent 后台返回的富文本数据
        for (let i = 0; i < arrsImg.length; i++) {
          let srcs = arrsImg[i].match(srcReg);
          imgArr.push(srcs[1])
        }
        this.setData({
          content : mycontent,
          imgArr
        })
      }else{
        wx.showToast({
          title:msg,
          icon:'none'
        })
        this.setData({
          content : ''
        })
      }
    })
  },
 

  // 点击放大预览图片函数
  catchImage(e:any){
    console.log(this.data.imgArr);
    wx.previewImage({
      current: this.data.imgArr[0], // 当前显示图片的http链接
      urls: this.data.imgArr // 需要预览的图片http链接列表
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

# wxml文件

<rich-text nodes="{{content}}" space="ensp" catchtap="catchImage"></rich-text>
1
上次更新: 2024/08/17, 20:43:29
【CryptoJS】使用介绍
微信小程序省市区级联选择

← 【CryptoJS】使用介绍 微信小程序省市区级联选择→

最近更新
01
base64转doc文件
01-03
02
手写签名
01-03
03
base64图片加水印
01-03
更多文章>
Theme by Vdoing | Copyright © 2023-2025 Adinnet
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式