uni-app中使用Towxml 3.0,小程序完美支持Markdown

本文介绍了Towxml 3.0,这是一个用于在微信小程序中渲染Markdown和HTML的渲染库。新版本体积更小、速度更快,支持更多特性,如echarts图表、LaTex数学公式、流程图等。文章提供了详细的使用指南,包括如何构建和在uni-app项目中集成。
摘要由CSDN通过智能技术生成

简介

  Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。
  Towxml 3.0版本发布啦!✨✨✨
  较2.x版本,新版体积更小、速度更快⚡️、支持无限级解析,增加诸多新特性。对微信小程序的Markdown及Html内容解析支持更加完善。
项目地址:https://github.com/sbfkcel/towxml

Towxml3.0 特性

  Towxml 3.0 完整支持以下功能。当然在构建时可仅保留需要功能以减少体积大小和代码依赖。

  • 支持echarts图表(3.0+)✨
  • 支持LaTex数学公式(3.0+)✨
  • 支持yuml流程图(3.0+)✨
  • 支持按需构建(3.0+)✨
  • 支持代码语法高亮、代码块行号显示
  • 支持emoji表情😉
  • 支持上标、下标、下划线、删除线、表格、视频、图片(几乎绝大部分html元素)……
  • 支持typographer字符替换
  • 支持多主题切换
  • 支持Markdown TodoList
  • 支持事件绑定(这样允许自行扩展功能哟,例如:点击页面中的某个元素,更新当前页面内容等…)
  • 极致的中文排版优化
  • 支持前后解析数据

Demo 截图

如何使用?

注意:3.0切勿直接拉取代码使用,请根据自行需要构建得到最终的代码。

首先需要构建

  • 克隆项目到本地或直接到项目地址下载压缩包
    git clone https://github.com/sbfkcel/towxml.git
  • 解压后使用cmd安装构建依赖
    npm installyarn install
  • 运行 npm run build 或 yarn run build即可

新构建出来的

  • 0
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
插件地址:https://github.com/kevenfeng/html-to-wxml如果前端技术比较牛,可以直接看github上面的demo。可以更好的理解用法。使用方法:1.引用插件var R_htmlToWxml = require(‘../../util/htmlToWxml.js’);//引入公共方法2.将html内容转成json数据R_htmlToWxml.html2json(“html内容”);转换后的json格式类型大概如下:3.吐到页面显示<block wx:for="{{content}}"  wx:for-index="idy"  wx:for-item="cellData">         <block  wx:if="{{cellData.type == 'view'}}">             <view class="p">                 <block  wx:for="{{cellData.child}}" wx:key="text">                     <block  wx:if="{{item.type == 'a'}}">                         <text class="a" data-seccode="{{item.attr['data-seccode']}}" data-secname="{{item.attr['data-secname']}}" bindtap="stockClick">{{item.text}}</text>                     </block>                     <block  wx:else>                         <text>{{item.text}}</text>                     </block>                 </block>             </view>         </block>         <block wx:if="{{cellData.type == 'img'}}">             <image class="img" data-index="{{idy}}" style="height: {{cellData.attr.height?cellData.attr.height:0}}px"  mode="aspectFit" src="{{cellData.attr.src}}" bindload="imageLoad"></image>         </block>     </block>demo效果:由于小程序图片的高度没法自适应,需要给图片设置高度,所以需要在图片加载完以后,获取图片高度,等比算出显示图片高度,赋值给对应图片通常我们抓取的内容是html页面,特别是像资讯这一类的,如果在小程序里面显示文章内容,此插件提供了一种解决方案,希望对大家有用。在客户端用native显示html页面体验上面没有native的好,htmlToWxml插件给客户端用native的方式显示html内容提供了一种解决方案
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值