在微信小程序中识别html标签的方法（wxParse）

最新推荐文章于 2025-05-11 16:42:18 发布

zhyzzz

最新推荐文章于 2025-05-11 16:42:18 发布

阅读量9.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序前端 js wxml

本文链接：https://blog.youkuaiyun.com/weixin_38423356/article/details/78076312

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用wxParse插件解决小程序开发中不支持HTML标签的问题，通过实例演示了从插件导入、数据处理到页面展示的全过程。

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

在小程序开发中遇到了小程序不支持html标签，这在获取后端提供的”商品详情页面“产生了很大难题，在网上找到了wxParse富文本插件，官方地址：wxParse

详细教程：

1、打开网站，将wxParse文件夹复制到项目中

2、在使用的页面导入文件

首先在xx.js导入文件，在文件头写上：

 
 var WxParse = 
 require(
 '../wxParse/wxParse.js')

如图：

其次在xx.wxml导入文件，在文件头写上：

 
 <
 import 
  src=
 "../wxParse/wxParse.wxml"
 /
 >

如图：

3、获取到数据以后

var article = '<div>这里是html数据</div>';  
/** 
* WxParse.wxParse(bindName , type, data, target,imagePadding) 
* 1.bindName绑定的数据名(必填) 
* 2.type可以为html或者md(必填) 
* 3.data为传入的具体数据(必填) 
* 4.target为Page对象,一般为this(必填) 
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选) 
*/  
var that = this;  
WxParse.wxParse('article', 'html', article, that,5);

4、在wxml中引入模板

//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

感谢wxParse作者写出这么好的插件