布局如下：
<!--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 <i>like</i> a box of
<b> 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
})
},
/**
* 生命周期函数--监听页面加载
*/
onl oad(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/1kFAGbsFIk3dDR64NwM5y2A?pwd=csdn