微信小程序全栈开发实战学习四(rich-text组件如何单击预览rich-text中的图片并保存?)

rich-text展示:
在这里插入图片描述
space:空格策略,控制中文空格显示的大小,有三种值,中文环境取emsp
nodes:可以取字符串(会影响性能),也可以取数组(推荐)
子属性:
1.name:节点名称
2.attrs:节点属性
3.children:子节点列表(数组类型)
4.type:节点类型,共有两种node(默认,可不写)和text

1.如何预览保存rich-text富文本组件中的图片

rich-text所有节点都屏蔽单击事件,我们可以在rich-text上添加tap事件,然后使用wx.previewImage这个接口预览图片,选择需要的图片下载,在预览之前我们需要遍历rich-text的nodes数据,把所有图片地址预先取出来,当单击rich-text富文本组件时,触发预览。我们可以通过tap事件中的e.pageX、e.pageY取到用户大概单击了什么位置,如果可以判断出通过位置判断出是哪张图片,就可以实现指定图片的预览与下载了。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.如何解决图片之间的间隙问题

可以直接添加内联样式
在这里插入图片描述
也可以声明一个通用的类样式,在img节点上添加
在这里插入图片描述
在这里插入图片描述

3.如何插入广告标签、如何将HTML文本解析呈现

可以使用parser来解析html源码,并在小程序中直接呈现
首先,下载源码,将parser文件夹放到项目中适当位置,然后在json文件中引用组件。
在这里插入图片描述
在这里插入图片描述
然后准备数据,放到data里面
在这里插入图片描述
最后就可以在页面文件中引用了
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值