微信小程序使用wxParse解析渲染html代码片段

文章介绍了如何在微信小程序中显示通过接口获取的HTML代码片段。通过使用wxParse库,可以解析并渲染富文本内容。首先从GitHub下载wxParse,然后在app.wxss中引入样式,在需要的页面JS文件中引入wxParse.js,调用WxParse.wxParse方法设置HTML内容,并在页面中引用模板。wxParse虽已停止维护,但仍能胜任此任务。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        最近项目中一个遇到需求,就是在微信小程序里,需要显示html代码片段内容,内容是通过接口读取的服务器中的富文本内容,是html代码片段,小程序默认是不支持html格式的内容显示的,会被认为是Object,无法正常的渲染出来,那我们需要显示html内容的时候,就可以通过wxParse来实现。
        首先我们在github上下载wxParse, wxParse目前虽然停止维护,但是还是能满足日常需求的,后面将介绍一下基于wxParse的,用来渲染小程序html代码片段的。为尊重原作具体请到这里查看

 

下载完之后我们需要用到目录下的wxParse文件夹,把他拷贝到我们的项目目录下  

下面是具体的使用步骤

1.在app.wxss全局样式文件中,需要引入wxParse的样式表

@import "../wxParse/wxParse.wxss";

 也可以在指定页面单独引入

2.在需要加载html内容的页面对应的js文件里引入wxParse

import wxParse from '../../wxParse/wxParse.js';

3.通过调用WxParse.wxParse方法来设置html内容

Page({
  data: {
  },
  onLoad: function () {
    var that = this;
    wx.request({
        url: '你的接口地址', 
        method: 'POST',
        data: { 你的提交数据 },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            //主要关注这里
            var htmlPart = res.data;
            WxParse.wxParse('tips', 'html', htmlPart, that,5);
        }
    })
  }
})

4.在页面中引用模板

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:tips.nodes}}"/>

        这里要注意,其它位置都是固定的写法的,只有 tips  是在调用解析时的那个第一个参数的名称,这个是依据自己定义的。按照这样这一波操作下来,应该一波就可以看到渲染的效果了,,如果行,请检查各页面的引入情况,是否成功引入,注意使用  ../../  这种方式应该时,层级关系。

        关于rich-text、web-view、WePY来实现html代码片段的渲染,大家请移步这里,这里就不做赘述了。

        

        希望对你有帮助,祝你顺利达到目的。

### 微信小程序解析 HTML 的方法 #### 使用 WxParse 插件 对于微信小程序而言,直接处理 HTML 内容并非原生支持的功能。为了能够展示来自服务器端带有 HTML 标签的内容,开发者通常会选择第三方插件如 **WxParse** 来完成这一任务[^1]。 安装并集成 WxParse 后,可以通过如下方式调用: ```javascript const WxParse = require('path_to_wxparse/wxParse'); // 引入 wxParse 模块 Page({ onLoad() { const articleHtmlContent = '<h1>Hello</h1><p>World!</p>'; WxParse.wxParse('article', 'html', articleHtmlContent, this); } }); ``` 需要注意的是,在某些情况下可能会遇到图片无法正常显示的问题。这可能是由于资源路径配置不当引起的。此时应该检查 `html2json.js` 文件中的设置,并确保已正确设置了业务域名白名单以及 HTTPS 配置[^3]。 #### 使用 Towxml 解析器 另一种解决方案是采用 **Towxml** 库来进行更全面的支持。除了基本的 HTML 外,它还提供了对 Markdown 文档的良好兼容性[^4]。 要开始使用 Towxml,首先得克隆其 GitHub 仓库并将项目内的必要文件加入到自己的工程目录下。接着执行必要的构建命令以生成所需的组件和样式表。最后一步是在页面逻辑层通过 API 接口加载待渲染的文章片段。 ```javascript import towxml from '../../utils/towxml/index'; // 假设 utils 文件夹位于 pages 上级目录 Page({ data: {}, onLoad(options) { let htmlString = `<div style="color:red">这是一个测试。</div>`; towxml.parse('contentKey', htmlString).then(res => { console.log(res); // 输出转换后的 JSON 数据结构供 wxml 渲染 this.setData({ contentJson: res }); }).catch(err => {console.error(err)}); }, }) ``` 在对应的 `.wxml` 页面模板中定义好接收这些动态内容的位置即可实现最终效果呈现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值