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

最新推荐文章于 2025-05-08 16:39:51 发布

馫嚞壵

最新推荐文章于 2025-05-08 16:39:51 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/ITMyFavorite/article/details/130356541

小程序专栏收录该内容

5 篇文章

订阅专栏

文章介绍了如何在微信小程序中显示通过接口获取的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代码片段的渲染，大家请移步这里，这里就不做赘述了。

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