【微信小程序】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

产品推荐

推荐理由

postman在国内使用已经越来越困难：
1、登录问题严重
2、Mock功能服务基本没法使用
3、版本更新功能已很匮乏
4、某些外力因素导致postman以后能否使用风险较大
出于以上考虑因此笔者自己开发了一款api调试开发工具SmartApi，满足基本日常开发调试api需求

简介

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

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

下面是一段smartApi使用介绍：

下载地址：

https://pan.baidu.com/s/1kFAGbsFIk3dDR64NwM5y2A?pwd=csdn