微信小程序使用towxml解析md/html

最新推荐文章于 2024-05-06 11:27:19 发布
VIP文章 最新推荐文章于 2024-05-06 11:27:19 发布
阅读量3.7k 收藏 11
点赞数 2
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/d875708765/article/details/107652616
版权

Towxml

Towxml github地址

注意

最新测试生成的是dist文件，然后直接引入会出现错误。需要更改一下文件。
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

介绍

Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。

安装使用（建议3.0，github主分支就是3.0）

本地创建一个空文件夹，使用git clone 到本地

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

安装构建依赖

npm install

按需编写config.js文件（不要改变里面的顺序，只需将注释去掉就行）

最低0.47元/天 解锁文章
被惦记的猫
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html-to-wxml-小程序中将html内容转化成wxml可以显示的内容，方便用于小程序中显示.zip
09-23
插件地址：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内容提供了一种解决方案
markdown pieces
qeatzy的博客
04-22 263
Blockquotes &ensp List items
微信小程序富文本解析器rich-text、web-view、wxParse、mp-html、towxml对比
ly2983068126的博客
10-22 5768
微信小程序解析富文本html大概有几种方式，我用过的有这三种rich-text、web-view、wxParse、mp-html，各有各的优缺点，接下来聊一聊。
探索TowXML：一款高效的XML处理库
gitblog_00004的博客
03-23 427
探索TowXML：一款高效的XML处理库 项目地址:https://gitcode.com/sbfkcel/towxml 在今天的数字化时代，XML（可扩展标记语言）作为数据交换和存储的标准之一，依然有着广泛的应用。如果你正在寻找一个高效、易用的XML解析和生成工具，那么TowXML值得你深入了解。 项目简介 TowXML是一个轻量级的Java库，专注于提供快速且内存效率高的XML处理能力。它由s...
11.19个人计划
weixin_34130389的博客
11-19 50
今日完成成绩录入系统代码 明日完成成绩查询的代码 转载于:https://www.cnblogs.com/qingjia/p/9985792.html
基于云开发的小程序同步公众号文章并用towxml解析html内容（三）
老何的博客
06-06 3430
微信小程序同步微信公众号文章已在前文实现： https://blog.csdn.net/haitaoxiaodian/article/details/90912387 本文中主要实现功能是点击文章列表的一条，然后在另一页展示详细内容，由于请求的文章数据是html格式的，但由于小程序的一些特殊性，无法直接渲染html，因此类似wxParse的开源组件诞生了，无非是穷举标签进行替换，差异在于覆盖是...
微信小程序使用（Towxml3.0）显示Markdonw、HTML
卜卦的博客
11-10 966
1. Towxml 下载 https://github.com/sbfkcel/towxml 2. 下载后将文件编译、构建资源 npm install npm run build 3. 将构建出来的towxml并解压至小程序项目根目录下，即（小程序/towxml） 4. 引入库/app.js //app.js App({ // 引入`towxml3.0`解析方法 towxml:require('/towxml/index') }) 5. 在页面配置文件中引入towxml组件 /pages/in
微信小程序使用html2wxml渲染HTML或Markdown文本
weixin_42281203的博客
05-16 1676
申请使用注意事项 插件版本解析服务是由 QwqOffice 完成，存在不稳定因素，如对稳定性有很高的要求，请自行搭建解析服务，或在自家服务器上直接完成解析。对于有关插件版本不能使用/不能解析的提问，不作任何回答 html2wxml微信小程序富文本组件 效果 参考 小程序富文本解析 https://github.com/icindy/wxParse PHP移植版highlight.js https://github.com/scrivo/highlight.php PHP编写的Markdown解析器 ht
微信小程序 html css xml,微信小程序 使用towxml解析html流程及踩坑记录
weixin_29469195的博客
06-07 684
towxml相对于wxParse还是有一定优势的，首先一些废弃或者过新的标签wxParse是不能解析的，会导致整个页面不能显示，其次 towxml对于界面的排版优化是比较美观的，对于开发者还算比较友好，个人是建议在wxParse没有完善之前使用towxml这个库来解析html以及markdown格式。towxml使用流程：1.将towxml库克隆到小程序根目录：gitclonehttps://...
微信小程序使用wxParse解析html的方法教程
01-19
最近在做一个微信小程序项，遇到了文章的详情页面是富文本的情况，内容是通过接口读取的服务器中的富文本内容，是html格式的，小程序默认是不支持html格式的内容显示的，那我们需要显示html内容的时候，就可以通过...
微信小程序使用wxParse解析html的方法示例
10-17
主要介绍了微信小程序使用wxParse解析html的方法,结合实例形式详细分析了wxParse的下载、导入及具体使用技巧,需要的朋友可以参考下
Towxml是一个可将HTMLMarkdown转为微信小程序WXML的渲染库
08-10
Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库
微信小程序使用wxParse解析html的实现示例
01-20
最近项目上遇到在微信小程序里需要显示新闻内容，新闻内容是通过接口读取的服务器中的富文本内容，是html格式的，小程序默认是不支持html格式的内容显示的，那我们需要显示html内容的时候，就可以通过wxParse来实现...
微信小程序里使用markdown
MR_BC的博客
01-13 2113
情况一：直接写md内容 const app = getApp() const _ts = this; var content = '# test' + _ts.data.number ; //markdown 内容 let data = app.towxml.toJson(content, 'markdown') data.theme = 'light'; _ts.setData({ article: data }); 情况二：后台传md内容 const app = getApp(); // 解析m
在微信小程序中,使用wxParse插件解析HTML/md富文本
dx3906nnn的博客
02-07 916
在微信小程序中,使用wxParse插件解析HTML/md富文本
小程序富文本解析——mpvue-wxparse、htmltowxml、parser
ᴴᴱᴸᴸᴼ
09-02 2247
目录使用经历mpvue-wxParse**`wxParser缺点`**：htmltowxml**`htmltowxml缺点`**：parser推荐使用parsre相应传送门 使用经历 对富文本插件使用经历，从一开始rich-text到mpvuew-wxParse，在到htmltowxml，最后还是选择了parser，下面为大家就简述下 mpvue-wxParse 属性 imageProp ...
微信小程序解析富文本html2wxml插件版
qq_45335911的博客
08-09 1151
html2wxml解析富文本 先说一下最近遇到的问题： 最近的项目中，请求的数据中，返回的数据字段是一段html富文本格式的html标签，虽然微信小程序官方提供了<rich-text>标签，还有就是像wxParse这样其他的解决方，但是因为没有去了解过不是太会使用，今天也是补习了下知识，但是也是感觉使用方面比较繁琐，而且阅读了官方文档网上也是搜索了一些知道他们是有很多标签不支持的而且像wxParse也是很出现很多的JavaScript的错误，我是在知道rech-text和wxParse之前知道
微信小程序富文本解析插件-towxml（扩展富文本图片预览功能）
RealizeInnerSelf丶
06-06 3861
文章目录微信小程序富文本解析插件-towxml（扩展富文本图片预览功能）富文本图片预览效果图基本配置towxml 使用与图片预览扩展定制样式补充说明不想把 towxml 放在小程序根目录？常驻小尾巴 微信小程序富文本解析插件-towxml（扩展富文本图片预览功能） 其实单纯渲染富文本直接用微信小程序的 rich-text 属性就够了 用 towxml 是为了扩展富文本图片的预览功能，微信自带的 rich-text 只能针对富文本整体监听事件，无法实现用户点哪张图片预览哪张，用户体验非常差 富文本图片预览
基于家政小程序的个性化家政服务研究
最新发布
2402_83689311的博客
05-06 222
基于家政小程序的个性化家政服务研究，是近年来随着移动互联网技术的快速发展和人们生活品质的提高而兴起的一个热门话题。以下是对该领域的研究探讨： 一、引言 随着现代生活节奏的加快，家政服务已成为越来越多家庭不可或缺的一部分。然而，传统的家政服务模式存在着服务质量参差不齐、价格不透明、预约不便等问题。为了解决这些问题，基于家政小程序的个性化家政服务应运而生。该服务模式通过利用移动互联网技术，实现了家政服务的精准匹配、实时互动和数据驱动，为用户提供了更加便捷、高效、贴心的家政服务体验。 二、个性化家政服务
微信小程序如何使用wx://连接mqtt
05-27
微信小程序不支持使用wx://连接mqtt，只能使用wxs://连接mqtt。wxs://是微信小程序专门为WebSocket提供的协议，与使用ws://或wss://类似，但是在小程序中使用wx.connectSocket方法时必须使用wxs://协议，否则会连接失败。因此，在微信小程序中连接mqtt服务器时，需要使用wxs://协议。具体使用方法可以参考我之前回答的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值