微信小程序使用wxParse解析html

最新推荐文章于 2024-09-13 21:32:39 发布

原创最新推荐文章于 2024-09-13 21:32:39 发布 · 654 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序解析HTML #wxParse使用

微信开发专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在微信小程序中使用wxParse组件解析并显示HTML内容。通过下载wxParse文件并正确引入，开发者可以轻松地将后台传来的HTML代码转换成小程序可识别的wxml格式，实现商品详情等复杂页面的展示。

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

1.需要下载wxParse文件(点击即可下载)

2.添加到自己的工程内

3.引入wxss js wxml

1.wxss引入

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

2.js引入

var wxParse = require('../../lib/wxParse/wxParse.js');

3.wxml引入

  <!--商品详情开始-->
  <view class="detail">
    <import src="../../lib/wxParse/wxParse.wxml" />
    <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
  </view>

4.参数解释使用

获取后台传过来的HTML代码 进行填充就OK
/**
* 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('goodsDetail', 'html', that.data.goods.detail, that,0);

<!--商品详情开始-->
  <view class="detail">
    <import src="../../lib/wxParse/wxParse.wxml" />
    <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
  </view>