微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）

朱雀 2021-03-23 14:50 721阅读 0赞

1.把wxParse文件全部放入项目。  
2.在wxml中import wxParse.wxml,并把template插入到到对应的位置上

<import src="../../../wxParse/wxParse.wxml"/>
    <view class="view-title">{
        {title}}</view>
    <view class="view-time-box">
      <text class="view-date">{
        {date}}</text>
      <text class="view-time">{
        {time}}</text>
    </view>
    <template is="wxParse" data="{
        {wxParseData:article.nodes}}"/>

3.在wxss中import wxParse.wxss，并设置样式；比如‘wxParse-image’是富文本图片转化成image组件之后的类名，‘wxParse-p’是p标签转化成view组件后设置的类名

@import "../../../wxParse/wxParse.wxss";
    page{
      background: #fff;
    }
    .view-title{
      line-height: 80rpx;
      font-size: 48rpx;
      color:#0C0C0C;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      max-height: 190rpx;
      min-height: 80rpx;
      width:690rpx;
      padding:30rpx 30rpx 0;
    }
    .view-time-box{
      height: 66rpx;
      line-height: 66rpx;
      font-size: 30rpx;
      color:#999999;
      margin-bottom: 40rpx;
      padding:0 30rpx;
    }
    .view-date{
      margin-right: 20rpx;
    }
    .wxParse-img{
      margin-top:20rpx;
      display: block;
      position:relative;
      top:0;
      left:50%;
      transform: translateX(-50%);
    }
    .wxParse-p{
      text-indent: 2em;
      margin-top:20rpx;
      color:#0C0C0C;
      line-height:50rpx;
      font-size:34rpx;
      padding:0 30rpx 30rpx;
      text-align: justify;
    }

4.js文件

var WxParse = require('../../../wxParse/wxParse.js');
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        title: '',
        date: "",
        time: "",
        id: ''
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.setData({
          id:options.id
        })
      },
      onShow: function () {
        wx.showLoading({
          title: '加载中...',
        })
        var that = this;
    
        // 模拟获取数据
        setTimeout(function () {
          that.setData({
            title:'侨宝柑普茶新会陈皮侨宝柑',
            date:"2018-03-01",
            time:"13:20:53"
          })
          var article = `
            <img src="../../../imgs/index/s.png"></img>
        <p>微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）</p>
        <p>微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）</p>
            <img src="../../../imgs/index/s.png"></img>
        <p>近两年，小青柑的火爆有目共睹，娇小玲珑的产品形态、便携式的消费场景、柑与茶结合的时尚方式以及独特的口感和养生功效，都在顺应着目前年轻化、多元化、便携化的茶叶消费市场需求，让它成为了一大爆品。</p>
          `;
          /**
          * 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('article', 'html', article, that, 20);
          
          // 更改数据、获取新数据完成
          wx.hideLoading();
        }, 500)
      }
    })

具体的API可以去GitHub上查看：[https://github.com/icindy/wxP...][https_github.com_icindy_wxP...]  
如果文章对你有帮助，可以点个赞，或者帮忙转载，标明出处就可以，谢谢！

[https_github.com_icindy_wxP...]: https://github.com/icindy/wxParse

发表评论取消回复

表情：

评论列表（有 0 条评论，721人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序显示富文本内容（wxparse）

.引入wxParse:下载地址[https://github.com/icindy/wxParse][https_github.com_icindy_wxParse] ...

Dear 丶/ 2024年04月18日 18:54/ 0 赞/ 119 阅读

相关小程序富文本WxParse插件

考[https://blog.csdn.net/loveyoulouyou/article/details/83413628][https_blog.csdn.net_l...

缺乏、安全感/ 2024年04月18日 16:26/ 0 赞/ 123 阅读

相关小程序循环解析富文本数据

言：数据是markdown编辑的内容，包含的都是带html的标签.。在循环里既想展示带html的数据，又不想影响其他字段数据。![在这里插入图片描述][watermark...

小灰灰/ 2024年04月17日 06:24/ 0 赞/ 113 阅读

相关微信小程序WxParse解析富文本（html）代码在线视频教程

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.c

野性酷女/ 2024年02月19日 16:35/ 0 赞/ 108 阅读

相关微信小程序解析富文本的方法

1.可以使用wxParse插件解析html 2.下载后复制到自己的小程序项目中 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

以你之姓@/ 2023年10月11日 12:25/ 0 赞/ 104 阅读

相关微信小程序之富文本解析（wxParse）

github地址： [https://github.com/icindy/wxParse][https_github.com_icindy_wxParse] 下载wxPare

分手后的思念是犯贱/ 2023年06月12日 09:51/ 0 赞/ 71 阅读

相关微信小程序--解析富文本编辑器HTML

1. index.wxss 中引入wxParse.wxss文件 @import "../wxParse/wxParse.wxss"; 2. index.wxm

谁践踏了优雅/ 2022年03月09日 15:36/ 0 赞/ 403 阅读

相关微信小程序中WxParse循环解析返回的富文本数据

WxParse循环解析一、遇到问题最近在做小程序，遇到这样一个需求：将百度的Ueditor编辑器存入的文本数据显示在小程序中，需要保留之前的样式，这就用到了 W

忘是亡心i/ 2022年02月17日 18:53/ 0 赞/ 600 阅读

相关小程序富文本wxparse

1.将wxparse文件夹拷贝至utils 2.引用模板 <import src="../../../util/wxParse/wxParse.wxml" /> 3.

清疚/ 2021年11月22日 03:26/ 0 赞/ 324 阅读

相关微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）

1.把wxParse文件全部放入项目。 2.在wxml中import wxParse.wxml,并把template插入到到对应的位置上  <im...

朱雀/ 2021年03月23日 14:50/ 0 赞/ 722 阅读