小程序---页面兼容h5标签

最新推荐文章于 2025-06-05 21:39:35 发布

Ariel_ckr

最新推荐文章于 2025-06-05 21:39:35 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序开发文章标签： wxParse 小程序兼容html

本文链接：https://blog.youkuaiyun.com/Ariel_201311/article/details/81488976

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

16 篇文章

订阅专栏

本文介绍了如何处理小程序中遇到的HTML标签兼容问题。通过使用wxParse工具，可以方便地将包含HTML标签的文章内容引入到小程序页面，避免手动修改每个标签的繁琐工作。只需将wxParse文件夹放入小程序pages目录，然后在wxml、js和wxss中进行相应引入即可实现兼容。

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

有时候当小程序向后台拿数据是一篇html标签的文章时，把它放进小程序会发现很多标签就不兼容，如果要一个个改又很麻烦，有没有方法可以很快地兼容html标签呢？
有个工具可以做到：wxParse
这里写图片描述
下载了它的压缩包后解压，复制wxParse文件夹放到小程序pages页面里：

在wxml里引入，这里的路径仅供参考：

<import src="../../../../wxParse/wxParse.wxml" />
 <view>
 //在需要放置html文本的地方使用wxParse模板
    <template is="wxParse" data="{{wxParseData:content.nodes}}" />
  </view>

在js里引入：

let wxparse = require("../../../../wxParse/wxParse.js");
Page({

  /**
   * 页面的初始数据
   */
  data: {
      content: ''
  },
   onLoad: function(options) {
	 var that = this;
	 .....
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
	  wxparse.wxParse('content', 'html', result.data.content, that);
   }

在wxss引入：

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