【微信小程序】RichText（92/100）

布局如下：

<!--pages/richText/richText.wxml-->
<view class="page-section-title">通过HTML String渲染</view>
<scroll-view scroll-y>{{htmlSnip}}</scroll-view>
<button style="margin: 30rpx 0" type="primary" bindtap="renderHtml">渲染HTML</button>
<block wx:if="{{renderedByHtml}}">
  <rich-text nodes="{{htmlSnip}}"></rich-text>
</block>
<view >====</view>
<view class="page-section-title">\n通过节点渲染\n</view>
<scroll-view scroll-y>{{nodeSnip}}</scroll-view>
<button style="margin: 30rpx 0" type="primary" bindtap="renderNode">渲染Node</button>

<block wx:if="{{renderedByNode}}">
  <rich-text nodes="{{nodes}}"></rich-text>
</block>

数据模型和控制器

// pages/richText/richText.js
const htmlSnip =
`<div class="div_class">
  <h1>Title</h1>
  <p class="p">
    Life is&nbsp;<i>like</i>&nbsp;a box of
    <b>&nbsp;chocolates</b>.
  </p>
</div>
`

const nodeSnip =
`Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you're gonna get.'
      }]
    }]
  }
})
`
Page({

  /**
   * 页面的初始数据
   */
  data: {
    htmlSnip,
    nodeSnip,
    renderedByHtml: false,
    renderedByNode: false,
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: #1AAD19;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you\'re gonna get.'
      }]
    }]
  },
  renderHtml() {
    this.setData({
      renderedByHtml: true
    })
  },
  renderNode() {
    this.setData({
      renderedByNode: true
    })
  },
  enterCode(e) {
    console.log(e.detail.value)
    this.setData({
      htmlSnip: e.detail.value
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

功能描述
富文本。

属性说明
属性 类型 默认值 必填 说明 最低版本
nodes array/string [] 否 节点列表/HTML String 1.4.0

space string 否 显示连续空格 2.4.1

合法值 说明
ensp 中文字符空格一半大小

emsp 中文字符空格大小

nbsp 根据字体设置的空格大小

user-select boolean false 否 文本是否可选，该属性会使节点显示为 block 2.24.0

nodes
现支持两种节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点

元素节点：type = node
属性 说明 类型 必填 备注
name 标签名 string 是 支持部分受信任的 HTML 节点

attrs 属性 object 否 支持部分受信任的属性，遵循 Pascal 命名法

children 子节点列表 array 否 结构和 nodes 一致

文本节点：type = text

属性 说明 类型 必填 备注

text 文本 string 是 支持entities

自研产品推荐

历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线
smartApi是一款对标国外的postman的api调试开发工具，由于开发人力就作者一个所以人力有限，因此v1.0.0版本功能进行精简，大功能项有：

• api参数填写
• api请求响应数据展示
• PDF形式的分享文档
• Mock本地化解决方案
• api列表数据本地化处理
• 再加上UI方面的打磨

为了更好服务大家把之前的公众号和软件激活结合，如有疑问请大家反馈到公众号即可，下个版本30%以上的更新会来自公众号的反馈。
嗯！先解释不上服务端原因，API调试工具的绝大多数时候就是一个数据模型、数据处理、数据模型理解共识的问题解决工具，所以作者结合自己十多年开发使用的一些痛点来打造的，再加上服务端开发一般是面向企业的，作者目前没有精力和时间去打造企业服务。再加上没有资金投入所以服务端开发会滞后，至于什么时候会进行开发，这个要看募资情况和用户反馈综合考虑。虽然目前国内有些比较知名的api工具了，但作者使用后还是觉得和实际使用场景不符。如果有相关吐槽也可以在作者的公众号里反馈蛤！
下面是一段smartApi使用介绍：

下载地址：

https://pan.baidu.com/s/1iultkXqeLNG4_eNiefKTjQ?pwd=cnbl