微信小程序如何显示富文本，类似v-html，rich-text
一、微信小程序需求，有一段富文本字符串需要解析并展示在页面上；
结构如下 ：content
二、解决办法
一、用过vue 的都知道vue 有个 v-html 属性，可以准换html格式并且展示；
但是微信小程序提供的方法是一个新的标签【基础内容 /rich-text】（微信文档传送门） ；
使用方法很简单：
<view><rich-text nodes="{{content}}"></rich-text>
</view>
二、属性只有两个
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| nodes | array/string | [ ] | 否 | 节点列表/HTML String | 1.4.0 |
| space | string | 否 | 显示连续空格 | 2.4.1 |
三、官方的注意事项
Bug & Tip
tip: nodes 不推荐使用 String 类型，性能会有所下降。
tip: rich-text 组件内屏蔽所有节点的事件。
tip: attrs 属性不支持 id ，支持 class 。
tip: name 属性大小写不敏感。
tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
tip: img 标签仅支持网络图片。
tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。
三、对于 rich-text 属性 space 的感知：
space 有三个值，通过对比可以发现：
1、默认的 rich-text 是不会解析空格的；
2、加入其中任意一个值，都会将原有的空格内容解析出来；
3、为了不影响布局，尽量还是 space一个属性比较好；
| 值 | 说明 |
|---|---|
| ensp | 中文字符空格一半大小 |
| emsp | 中文字符空格大小 |
| nbsp | 根据字体设置的空格大小 |
以下是测试三个值的区别：
0 不加space
- 1 加入 emsp
- 2 加入 ensp
- 3 加入nbsp
微信小程序如何显示富文本，类似v-html，rich-text相关推荐
- 微信小程序 - 解决 rich-text 富文本解析图片无法自适应宽高问题（图片超出屏幕宽度且不受控）
前言 注意:您无法通过直接指定 <img> 标签样式来试图设置为自适应图片. 使用官方 <rich-text> 富文本组件解析时, 当内容包含图片(大图)时显示的结果就会超出屏 ...
- 微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复
在上一篇微信小程序开发(十二)富文本插件wxParse的使用中,我已经使用了wxParse插件.下午有时间就仔细的把玩了一下,发现了一个bug. 问题描述 仔细看报错,我们会发现是wxParse.js ...
- 微信小程序：rich-text 富文本中图片自适应
/*** 处理富文本里的图片宽度自适应* 1.去掉img标签里的style.width.height属性* 2.img标签添加style属性:max-width:100%;height:auto* 3 ...
- 微信小程序解析html富文本插件wxparse的使用
第一步:下载把wxparse文件放到根目录下 第二步:引入<import src="../../wxParse/wxParse.wxml"/> 在xx.wxml页面 ...
- 在微信小程序上,帮助中心界面实现类似手风琴案例
在微信小程序上,帮助中心界面实现类似手风琴案例 wxml <view class="container"><block wx:for="{{arrdat ...
- 微信php echo换行,微信小程序文字显示换行问题
微信小程序文字显示换行问题 小程序文字显示换行 问题 用户在上传图文时,输入换行符.导致我在拿到数据后JSON.parse的时候报错. 大概这样的结构: [{ text:'落魄前端 在线炒粉!!!' ...
- 微信小程序手把手教你实现类似Android中ViewPager控件效果
微信小程序手把手教你实现类似Android中ViewPager控件效果 前言 需求分析 头部TAB 滑动的内容部分 最终版本 尾巴 前言 在做Android开发的时候,ViewPager是开发者使用频 ...
- 微信小程序 换行显示指定行数据量
微信小程序 换行显示指定行数据量 方式1 在wxml进行数据的判断展示 =====page.js 文件Page({data:{testArr:['a0','a1','a2','a3','a4','a5 ...
- 微信小程序——读取显示用户头像昵称
微信小程序--读取显示用户头像昵称 代码仓库地址 一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步骤 2.1 自动生成小程序 完成开发者注 ...
最新文章
- JavaBean中DAO设计模式介绍
- Python sorted 和 sort() 的区别
- h5移动端设备像素比dpr介绍
- C#中使用opencv处理图像
- linux上 arm开发环境搭建,详解 LINUX下QT For ARM开发环境搭建过程
- C++：获取图片文件信息-图片名称、类型、像素宽高
- Java Web学习总结（35）——HTTP状态码汇总
- contiki makefile框架分析 contiki学习之一
- 【渝粤题库】 陕西师范大学 210006幼儿园课程作业（高起专）
- Docker镜像下载到本地及恢复
- java中hashMap排序
- 计算机水平居中怎么做,word标题居中怎么设置
- 【Java基础 项目实例--Bank项目5】Account 和 customer 对象等 继承、多态、方法的重写...
- 阿里云 python_阿里云python sdk
- 元宇宙iwemeta：元宇宙数字人实践落地应用场景
- 前端面试题型汇总（适合应届/社招1年水平）
- 715 工作制要来了！这家大公司老板：996 算个毛啊，我们715...
- 云队友丨中国互联网反垄断简史
- 无线网卡m2 ngff keyakeye接口改转多口有线网卡实现软路由
- Windows 源码运行 ThingsBoard