914.【前端】Taro集成towxml渲染markdown文档

简介: 914.【前端】Taro集成towxml渲染markdown文档

一、克隆Towxml项目

git clone https://github.com/sbfkcel/towxml.git

image.png

二、配置功能特性

  1. 删除不需要的echarts支持

    image.png

三、安装项目依赖

cd towxml
npm install

四、打包

npm run build

image.png

五、集成进 Taro项目

  1. 将打包生成的dist目录重命名为towxml复制到Taro项目的微信dist目录下
    image.png
  2. 将打包生成的dist目录重命名为towxml 再次复制到Taro项目的根目录下(这样项目不会报错)
    image.png
  3. 集成代码如下

...your import...
import towxml from '../../../towxml'
interface DimensionWritingProps {
}
export default function DimensionWriting(props: FC<DimensionWritingProps>) {
...your logic
  // towxml data
  const [dataTowxml, setDataTowxml] = useState({})
  const router = useRouter()
  useEffect(() => {
    if(dataDimensionWriting.content.length >0 ) {
      let result = towxml(dataDimensionWriting.content[0].base_dimension.content,'markdown',{
      })
      setDataTowxml(result)
      setIsReady(true)
    }
  },[dataDimensionWriting.content.length])
  if (!isReady) return null
  return <View className='dimension-writing'>
    <BNavTopV2 title={"文章锦集"}/>
    <View className={'article'}>
      <View className={'header'}>{dataDimensionWriting.content[0].base_dimension.name}</View>
      <View className={'section'}>
        {
          // @ts-ignore
<towxml nodes={dataTowxml}/>
        }
      </View>
    </View>
  </View>
}
DimensionWriting.defaultProps = {}
  1. 集成代码配置如下

export default {
  navigationStyle: "custom",
  enableShareAppMessage:true,
  enableShareTimeline: true,
  usingComponents: {
    towxml: '../../towxml/towxml',
  },
}

六、最终效果

image.png

ok,已完成

目录
相关文章
|
11天前
|
JSON 前端开发 JavaScript
Docusaurus框架——快速搭建markdown文档站点介绍sora
Docusaurus框架——快速搭建markdown文档站点介绍sora
33 0
|
3天前
|
前端开发 Java 关系型数据库
小唐开始学 Spring Boot——(5)前端显示集成
小唐开始学 Spring Boot——(5)前端显示集成
|
6天前
|
存储 缓存 监控
深入理解前端性能优化:从网络到渲染
网络优化包括减少HTTP请求、使用HTTP/2、开启GZIP压缩和缓存策略。资源加载优化涉及懒加载、预加载和预读取。渲染优化建议使用Critical CSS、减少CSS和JavaScript阻塞以及避免强制同步布局。Service Worker实现离线存储,性能监控使用Lighthouse等工具。动态导入和代码拆分减少初始加载时间,响应式图片适应不同设备。Web Workers处理耗时任务,避免内存泄漏。
30 3
|
10天前
|
前端开发 JavaScript 开发者
深入理解前端性能优化:从加载到渲染的全流程分析
前端性能优化是Web开发中的关键一环。本文将从加载资源、解析HTML、执行JavaScript、样式计算、布局和渲染等多个方面深入探讨前端性能优化的全流程,为开发者提供全面的技术指南和实用建议。
|
11天前
|
数据采集 数据挖掘 Python
Python之html2text: 将HTML转换为Markdown 文档示例详解
Python之html2text: 将HTML转换为Markdown 文档示例详解
15 0
|
11天前
|
前端开发 定位技术 API
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
【4月更文挑战第30天】本文介绍了在Flutter中集成第三方服务,如支付和地图,以增强应用功能和用户体验。开发者可通过官方或社区插件集成服务,关注服务选择、API调用、错误处理和用户体验。支付集成涉及选择服务、获取API密钥、引入插件、调用API及处理结果。地图集成则需选择地图服务、获取API密钥、初始化地图并添加交互功能。集成时注意选择稳定插件、阅读文档、处理异常、优化性能和遵循安全规范。随着Flutter生态发展,更多第三方服务将可供选择。
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
|
11天前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
【4月更文挑战第30天】本文探讨了如何在Flutter中集成和交互原生代码,以利用特定平台的API和库。当需要访问如蓝牙、特定支付SDK或复杂动画时,集成原生代码能提升效率和性能。集成方法包括:使用Platform Channel进行通信,借助现有Flutter插件,以及Android和iOS的Embedding。文中通过一个电池信息获取的例子展示了如何使用`MethodChannel`在Dart和原生代码间传递调用。这些技术使开发者能充分利用原生功能,加速开发进程。
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
|
11天前
|
传感器 前端开发 Android开发
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
【4月更文挑战第30天】本文探讨了Flutter插件开发的关键技术和实践,包括插件作为连接Flutter与原生功能桥梁的角色,开发流程(定义接口、实现原生代码、打包发布),以及集成方法(添加依赖、初始化)。文中提到了多媒体、传感器和文件系统等常见插件类型,并以相机插件为例说明开发步骤。此外,还强调了版本兼容性、性能优化和错误处理的注意事项,推荐了开发工具和资源。随着Flutter的发展,插件开发将更加重要,未来有望形成更丰富的生态系统。
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
|
11天前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
11天前
|
存储 对象存储 C++
在 VS Code 中使用 OSS 进行 Markdown 文档编写
阿里云OSS对象存储服务是理想的存储解决方案,专门用于承载大量非结构化数据。在VSCode中编写Markdown文档时,手动上传图片至OSS并获取相应链接的过程通常复杂且耗时。为此,Aliyun OSS Uploader插件应运而生,以简化和优化此流程。它不仅能够自动将图片上传到OSS并生成可供插入的链接,还能在您需要时通过撤回链接,删除已上传的图片,极大地提升了效率和便捷性。