微信小程序rich-text富文本用法实例分析

本文实例讲述了微信小程序rich-text富文本用法。分享给大家供大家参考，具体如下：

rich-text是一个新增的微信小程序插件,从基础库1.4.0开始,低版本需要做兼容处理

nodes属性可为Array和String类型,但推荐使用Array.由于String类型最终也会转为Array类型

nodes分为支持两种节点,分别为元素节点(type=node ,默认为元素节点)和文本节点(type=text)

元素节点

name 标签名 String 是 支持部分受信任的HTML节点
attrs 属性 Object 否 支持部分受信任的属性，遵循Pascal命名法
children 子节点列表 Array 否 结构和nodes一致 
<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
<!--{{nodes}}其中的变量名与data中名字相同-->
<!--支持默认事件tap、touchstart、touchmove、touchcancel、touchend和longtap-->

// rich-text.js
Page({
 data: {
 nodes: [{
 name: 'div',
 attrs: {
 class: 'div_class',
 style: 'width : 100px; height : 100px; color: red;'
 },
 children: [{
 type: 'text',
 text: 'Hello World!'
 }]
 }]
 },
 tap() {
 console.log('tap')
 }
})

如果页面中存在多个富文本,富文本中存在多个孩子,请看下例:

<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}"></rich-text>
<rich-text nodes="{{nodes1}}"></rich-text>

// rich-text.js
Page({
 data: {
 nodes: [{
 name: 'div',
 attrs: {
 class: 'div_class',
 style: 'width : 100px; height : 100px; color: red;'
 },
 children: [{
 type: 'text',
 text: 'Hello World!'
 }]
 }],
 nodes1: [{
 name: 'p',
 attrs: {
 class: 'p_class',
 style: 'text-align : center; color: green;'
 },
 children: [{
 type: 'text',
 text: '我是p标签!!!'
 },{
 name: "span",
 attrs: {
  style: "color:red",
  class: "span_class"
 },
 children: [{
  type: "text",
  text: '我是span标签,哈哈哈哈'
 }]
 }]
 }]
 },
})

文本节点

text 文本 String 是 支持entities 
<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}"></rich-text>

// rich-text.js
Page({
 data: {
 nodes: "我是文本节点,意外不?"
 },
})

注意:

  • 全局支持class和style属性，不支持id属性。
  • nodes 不推荐使用 String 类型，性能会有所下降
  • rich-text 组件内屏蔽所有节点的事件。
  • name 属性大小写不敏感
  • 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除,受信任的html节点请看官方文档
  • img 标签仅支持网络图片

希望本文所述对大家微信小程序开发有所帮助。

赞 (0)

相关推荐

  • 微信小程序 富文本转文本实例详解

    微信小程序 富文本转文本实例详解

    微信小程序-富文本转文本 最近小程序这么火,我也来搞搞.发现了一个恶心的问题.小程序没有组件能支持富文本内容的,改接口又不太合适,于是有了这问,没技术含量纯粹记录 首先我们看眼没有被格式的富文本显示: *.wxml内代码.content是富文本内容 <view> <text>{{content}}</text> </view> 显示结果: 由以上图片看到,小程序无法解析html文件 我们需要处理html富文本内容,让其显示好看点 下面直接上代码了,主要功能就

  • 微信小程序日历/日期选择插件使用方法详解

    微信小程序日历/日期选择插件使用方法详解

    微信小程序日历选择器插件点击日历日期可以获取到年月日,具体内容如下 wxml <view class="canlendarBgView"> <view class="canlendarView"> <view class="canlendarTopView"> <view class="leftBgView" bindtap="handleCalendar" dat

  • 微信小程序图表插件(wx-charts)实例代码

    微信小程序图表插件(wx-charts)实例代码

    微信小程序图表工具,charts for WeChat small app 基于canvas绘制,体积小巧 支持图表类型 饼图 pie 圆环图 ring 线图 line 柱状图 column 区域图 area 代码分析 Here 参数说明 opts Object opts.canvasId String required 微信小程序canvas-id opts.width Number required canvas宽度,单位为px opts.height Number required can

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

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

     微信小程序 rich-text的使用方法 rich-text 属性:nodes 类型:Array / String 结点列表 / HTML String 全局支持class和style属性,不支持id属性. 结点类型:type = node , name 标签名 String 是 支持部分受信任的HTML结点,  attrs 属性 Object 否 支持部分受信任的属性,遵循Pascal命名法 ,  children 子结点列表 Array 否 结构和nodes一致 结点类型:type = t

  • 微信小程序实现富文本图片宽度自适应的方法

    微信小程序实现富文本图片宽度自适应的方法

    引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确 思路 把图片的宽度改为手机屏幕对应的宽度 微信小程序需要知道的知识 需要知道微信小程序里有自己的宽度标准,单位为rpx: 针对所有不同尺寸的浏览器,微信小程序里规定屏幕宽为750rpx: 解决 WXML <view class='html_detail'> <rich-text nodes='{{artical}}

  • 微信小程序开发之toast提示插件使用示例

    微信小程序开发之toast提示插件使用示例

    前言 3月28号微信更新了版本,showToast可以通过image参数修改默认icon了,最大时间也取消了. 以上两个更新实用很多,但icon还是无法去除.显示形式有点单一,无法自定义,可能后续更新会增加更多功能.下面来看看本文的详细内容: 下载文章下面的文件,放在根目录. 然后在app.js中引入js并添加到App中,如下: var wxToast = require('toast/toast.js') App({ wxToast , onLaunch: function () {} })

  • 微信小程序数字滚动插件使用详解

    微信小程序数字滚动插件使用详解

    用es6语法方式写了个微信小程序小插件–数字滚动: 效果图: wxml页面布局代码: <!--pages/main/index.wxml--><view class="animate-number"> <view class="num num1">{{num1}}{{num1Complete}}</view> <view class="num num2">{{num2}}{{num2Co

  • 如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除html标签及 空格 let richText = ' <p style="font-size: 25px;color: white">       sdaflsjf的丰富及饿哦塞尔</p><span>dsfjlie</span>'; /* 去除富

  • 微信小程序整合使用富文本编辑器的方法详解

    微信小程序整合使用富文本编辑器的方法详解

    本文实例讲述了微信小程序整合使用富文本编辑器的方法.分享给大家供大家参考,具体如下: 使用WxParse插件实现小程序的富文本显示 ,下载地址:富文本插件WxParse 具体使用步骤: 1. 复制插件文件夹到项目根目录,emojis是表情包,可选择性删除 2. 在.js文件中引入WxParse模块 var WxParse= require('../../../wxParse/wxParse.js'); 3. 在.wxss文件中引入WxParse.wxss样式,也可以在app.wxss中引入 @i

  • 微信小程序富文本渲染引擎的详解

    微信小程序富文本渲染引擎的详解 步骤 把 wxParser 目录放到小程序项目的根目录下 在需要富文本解析的 WXML 内引入 wxParser/index.wxml 在页面 JS 文件内使用 wxParser.parse(options) 方法解析 HTML 内容 在小程序项目根目录的 app.wxss 内引入 wxParser 的默认样式库 wxParser.parse(options) 方法的 options 参数说明 参数名 类型 必填 描述 bind String 是 要绑定的数据名称

随机推荐