【原生小程序-如何让rich-text里面的图片长按保存或分享】

最新推荐文章于 2024-05-31 15:50:31 发布

聚宝盆_

最新推荐文章于 2024-05-31 15:50:31 发布

阅读量76

点赞数 1

分类专栏： # 小程序文章标签：小程序前端

本文链接：https://blog.csdn.net/weixin_47416539/article/details/138898293

版权

小程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<rich-text nodes="{{info.content}}" catchtap="richTextClick"></rich-text>

var $=getApp();
Page({
  data:{
    info:{},
    next:{},
    prev:{}
  },
  onLoad:function(o){
  //对样式做调整
    var t=this;
    $.http('请求接口',{传参},function(r){
      r.data.info.addtime=$.date('Y-m-d',r.data.info.addtime),
      r.data.info.content = r.data.info.content
      // .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
      .replace(/<p>/ig, '<p style="font-size: 16px; line-height: 25px;margin-bottom:5px;">')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
      // .replace(/\<img/gi, '<img style="width:200px;height:auto;display:block;margin: 0 auto; "')
      .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img style="max-width: 100%;display:block;height:auto;" $1');
    })
  },
  //长按预览图片下载保存图片
  richTextClick:function() {
     // 富文本
     const richContent = this.data.info.content;
     // 判断含有图片
     if (richContent.indexOf("src") >= 0) {
       const imgs = [];
       richContent.replace(/]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
         imgs.push(capture);
       })
       wx.previewImage({
         current: imgs[0], // 当前显示图片的http链接
         showmenu:true,//可以进行下载或者分享
         urls: imgs
       })
     }
  }
})