微信小程序最详细的rich-text使用方法

最新推荐文章于 2024-05-20 10:08:28 发布
最新推荐文章于 2024-05-20 10:08:28 发布
阅读量7.5w 收藏 54
点赞数 12
分类专栏： 微信小程序 文章标签： 微信小程序 富文本编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41616604/article/details/82014933
版权

关于微信小程序rich-text的使用方法

近期开始写一个电商类型的微信小程序。其中在商品详情页，为了展示商品的图文不得不使用富文本编辑器。
这里简单的描述下小程序rich-text

这是一个简略的页面，页面主要由文字和图片组成
这里写图片描述

这是一个前面代码构成，其中rich-text节点中nodes绑定的就是我们的内容
这是html页面

然后在page里面定义html这个参数（注意html类型为字符串）
这里写图片描述

最后通过在后端返回的数据，在微信生命周期onshow里面设置。如图
这里写图片描述

这里的str是我定义的一个变量用来存放后台数据，图片的样式通过正则匹配去修改，
需要注意的是，因为我这里有多张图片，在排列时上下之间可能会出现间隙如图示
这里写图片描述
解决方案就是在正则中给img加上display：block即可；

想了解更多，可以参考微信官方文档https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

你有病我吃药
关注
  • 12
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
flutter_easy_rich_text:EasyRichText小部件提供了一种使用RichText的简便方法
05-05
easy_rich_text EasyRichText窗口小部件使RichText窗口小部件变得容易。 您不必手动拆分字符串。 此小部件使用正则表达式根据EasyRichTextPattern列表中定义的模式有效地分割字符串。 EasyRichTextPattern是一个类，用于定义要设置格式的文本模式。 默认情况下，将matchWordBoundaries:true设置为匹配整个单词。 如果要匹配单词中的子字符串，请设置matchWordBoundaries:false GestureRecognizer和url_launcher集成在一起。 入门 正在安装： dependencies : easy_rich_text : ' ^0.5.4 ' 例子： | | | | | | | | 网址启动器| 手势识别器| 所有RichText属性| 特殊的角色 简单的例子： E
小程序开发之组件rich-text（富文本）
热门推荐
M.Siebel
01-11 1万+
rich-text 富文本 富文本格式（Rich Text Format, 一般简称为RTF）：多文本格式，由未格式化文本、控制字、控制符号和组组成。为了更容易的转换，一个标准的RTF文件应该仅包含7位ASCII码字符，RTF文件没有限制文件的行的最大长度。 普通的txt文件是不能显示格式的。 富文本格式rtf文件可以显示出很多格式信息。 富文本的作用：比如可以在一个文本中包含不同的颜色、不同的字...
微信小程序富文本标签rich-text的使用
笑到世界都狼狈的博客
11-16 6086
wxml: <!-- rich-text 富文本标签 1 nodes属性来实现 1 接收标签字符串 2 接收对象数组 --> 接收对象数组 <rich-text nodes="{{html}}"></rich-text> js: Page({ data:{ // 1 接收标签字符串 // html:'<div style="border: 0px solid black; position: relative; box-s
推荐开源项目：rich-text——富文本处理利器
最新发布
gitblog_00050的博客
05-20 368
推荐开源项目：rich-text——富文本处理利器 项目地址:https://gitcode.com/contentful/rich-text 项目介绍 rich-text 是一个采用TypeScript编写的单库项目，旨在帮助开发者处理和渲染Contentful的富文本文档。这个项目包含了多个子包，提供了从Markdown转换到富文本，再到HTML、React组件等不同形式的转换工具，以及用于链...
微信小程序如何使用富文本
listStyleScript的博客
05-13 438
wxParse怎么使用 github官方: https://github.com/icindy/wxParse 步骤简介 1.在GitHub上吧文件夹wxParse下载下来 - wxParse/ -wxParse.js(必须存在) -html2json.js(必须存在) -htmlparser.js(必须存在) -showdown.js(必须存在) -wxDiscode.js(必须存在) -wxParse.wxml(必须存在) -wxParse.wxss(必须存在) 2.在要使用的页面js中引入wxPa
微信小程序富文本解析器rich-text、web-view、wxParse、mp-html、towxml对比
ly2983068126的博客
10-22 6190
微信小程序解析富文本html大概有几种方式，我用过的有这三种rich-text、web-view、wxParse、mp-html，各有各的优缺点，接下来聊一聊。
微信小程序text内置组件换行符不换行的原因-wxs处理换行符，正则加段首空格（wxs写过滤器）
aliven1的博客
06-10 1510
小程序text的问题，wxs
小程序富文本rich-text、数组拼接、 包含特殊符号处理
柠檬酸
08-20 6942
先说一下rich-text的实现,很简单 html <rich-text nodes="{{myrich}}"></rich-text> js 注意：里面不能用view 否则运行不出来,可以用html的标签，详细见文档 https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html......
小程序rich-text不换行的问题
小多的博客
04-02 3556
由于数据是由后台富文本编辑器转换过来的，所以排除主动设置行内样式的方法，传递过来的数据不换行原因可能是： 富文本编辑器的问题 不支持行内样式（解决：起class名，把换行样式写到class内） 由于传递过来的数据含有 pre 标签 （解决：过滤一下pre标签） <rich-text style="word-wrap: break-word;word-break: break-all;" :nodes="dataForm.richtContent"></rich-text> ..
微信小程序 rich-text的使用方法
08-29
主要介绍了 微信小程序 rich-text的使用方法的相关资料,这里提供属性及方法并实现实例，帮助大家学习理解，需要的朋友可以参考下
微信小程序rich-text富文本用法实例分析
10-16
3. **事件绑定**：`rich-text`组件支持默认的微信小程序事件，如`tap`、`touchstart`、`touchmove`、`touchcancel`、`touchend`和`longtap`。但是，注意这些事件只在`rich-text`组件级别生效，不能在内部的HTML元素...
富文本解析-微信小程序 rich-text 组件
03-29
微信小程序在rich-text组件后开始支持富文本解析，但需要对照一套自定义规则的 JOSN 数据格式，API 返回的富文本需要前端做数据转换。 这个主要是用于某些需要 API 直接输出富文本的地方。比如后端输出title字段, 但...
将富文本转为微信小程序rich-text组件支持的json格式wxapp-rich-text-master.zip
09-25
在微信小程序开发中，富文本显示是...了解以上知识点后，开发者可以有效地利用`wxapp-rich-text-master`项目来解决在微信小程序中展示富文本的问题。通过合理的转换和使用，可以实现丰富的文本展示效果，提升用户体验。
微信小程序中rich-text富文本的用法
qq_46665317的博客
06-16 3753
{解决办法：用encodeURIComponent转码${JSONstringify现在用rich-text标签直接渲染goodDetails 就显示正常了。
rich-text文本不换行问题
shunganmiusa的博客
12-07 833
rich-text文本不换行问题
rich-text标签富文本解析
baidu_41899377的博客
03-10 753
在真机调试时，发现样式写在rich-text不生效。网上的很多在富文本内容基础上加个div语法会异常，页面也并没有生效。解决办法是：建立一个过滤器（如果解析出现img，控制台会截取报错，那么列表遇到img就不展示）在做uniapp开发小程序时，发现rich-tex标签解析富文本在ios上使用不了。/*多行文本溢出省略号*/
【微信小程序入门到精通】— 这篇看完直接拿下 text 和 rich-text 组件！
热爱生活，积极向上的阿酱！
09-30 3483
对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？为此我特意开设此专栏，在我学习的同时也将其分享给大家！本文主要讲解 text 和 rich-text 组件，我将逐一进行讲解，如果后文有什么错误的地方，期待您的指正！如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！大家每天都要开开心心的喔，让我们一起快乐的学习吧！
微信小程序view中文字、rich-text无法换行
落花生
09-28 7176
扎心的效果是这样的，超出的部分它居然。。不自。。动换行 在试过 white-space:pre-line   /   flex-wrap:wrap   什么的无果后 只需轻轻的加一句  word-break:break-all;       OK ...
微信小程序 text 和 rich-text用法
qq_46099629的博客
09-27 505
【代码】微信小程序 text 和 rich-text用法。
微信小程序开发中rich-text设置文字大小
08-09
在微信小程序开发中，可以使用CSS样式来设置rich-text组件中文字的大小。具体的设置方法是在rich-text组件的父元素中添加一个内联样式，使用CSS的font-size属性来指定文字的大小。例如，可以使用以下代码来设置rich-text组件中文字的大小为16像素： <rich-text nodes="{{vHtml}}" style="font-size:16px;"></rich-text> 这样就可以将rich-text组件中的文字大小设置为16像素。通过调整font-size的值，可以实现不同大小的文字效果。请注意，这里的设置只会影响到rich-text组件中的文字大小，不会影响到其他组件的文字大小。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值