爆改 toxml 组件 支持数据双向绑定 解决数据刷新问题

GGGGGGGGGGGGGGGGGithub地址自行研究

sbfkcel/towxml: 微信小程序HTML、Markdown渲染库https://github.com/sbfkcel/towxml原组件是以导入数据渲染信息为目的、本文以AI数据返回小程序为模拟效果演示

默认情况只在ready 环节进行渲染静态资源

1、对传入数据容器的位置做处理

javascript 复制代码
Component({
  properties: {
    title: {
      type: String,
      value: '',
      // 将新的数据render到容器
      observer(newVal) {
        this.renderMarkdown(newVal)
      }
    }
  },
  methods: {
    renderMarkdown(content) {
      // 你的 markdown 渲染逻辑
      // ...
      this.setData({ parsedContent: /* 渲染后的内容 */ })
    }
  }
})

2、确认数据是否正常传入toxml组件

javascript 复制代码
// 可利用深浅拷贝
// 在 setData 回调里
this.setData({ messages: JSON.parse(JSON.stringify(messages)) }, () => {
  this.setData({ lastId: 'last-message' })
})

3、给与页面渲染元素、唯一KEY 保持唯一性

相关推荐
默魔3 天前
uniapp canvas 生成海报并保存到相册
uni-app·notepad++
JIngJaneIL7 天前
停车场管理|停车预约管理|基于Springboot+的停车场管理系统设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·notepad++·停车场管理|
一人一程温一壶酒13 天前
微信小程序uniapp开发附源码——图片加水印
微信小程序·uni-app·notepad++
LXA080914 天前
UniApp 小程序中使用地图组件
小程序·uni-app·notepad++
IDOlaoluo15 天前
Notepad++ 7.8.4 安装步骤详解(附 npp.7.8.4.Installer 安装教程)
notepad++
菠菠萝宝15 天前
【AI应用探索】-10- Cursor实战:小程序&APP - 下
人工智能·小程序·kotlin·notepad++·ai编程·cursor
G佳伟16 天前
微信小程序实现长按复制选中文字的效果
微信小程序·小程序·notepad++
TiAmo zhang16 天前
微信小程序开发案例 | 幸运抽签小程序(下)
微信小程序·小程序·notepad++
TiAmo zhang19 天前
微信小程序开发案例 | 极简清单小程序(下)
微信小程序·小程序·notepad++
困到晕阙20 天前
【解决】Notepad++设置中文模式
notepad++