uniapp与小程序富文本内容解析的方法

芭蕉**

已于 2022-07-19 14:45:59 修改

阅读量1.1k

点赞数

分类专栏： Vue uniapp 小程序富文本文章标签： javascript 前端 vue.js

于 2022-07-18 17:13:46 首次发布

本文链接：https://blog.csdn.net/baidu_35290582/article/details/125855087

版权

uniapp 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

Vue

2 篇文章 0 订阅

订阅专栏

小程序富文本

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在uniapp和小程序中解析富文本内容。对于小程序，通过引入wxParse库解析HTML并展示；在uniapp中，使用richText.js将HTML转换为适合小程序显示的内容。具体步骤包括下载相关库、引入文件、调用解析方法，并在页面结构中正确使用模板。

摘要由CSDN通过智能技术生成

uniapp与小程序富文本内容解析的方法

小程序里面的使用：
首先在github上下载文件包：https://github.com/icindy/wxParse
放在项目根部录下面：

具体使用
在about.wxml页面引入：

<import src="/wxParse/wxParse.wxml"/>
<view class="container">
  <template is="wxParse" data="{{wxParseData:description.nodes}}"/>
</view>

在该页面的about.wxss里面引入:

@import "/wxParse/wxParse.wxss";

在about.js里面引入：

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

执行方法，请求接口

 onLoad: function (options) {
    this.getDetail()
  },
  //获取商品详细信息
  getDetail() {
    var that=this;
    post(urlList.content,'POST',{id: 6}).then(res => {
       //html转wxml
       WxParse.wxParse('description', 'html', res.data.content, that, 0);
    })
  },

小程序里面解析富文本：
在网上下载richText.js，然后放在项目里面。
在这里插入图片描述
在about.vue文件里面引入

<template>
  <view class="container">
    <rich-text :nodes="content"></rich-text>
  </view>
</template>

<script>
   var graceRichText = require("../../../common/richText.js");
  export default {
    data() {
      return {
        content: ''
      }
    },
    onLoad(options) {
      this.getAgree()
    },
    methods: {
      getAgree() {
        this.httpClient.post('xieyi',{id: 1}).then(res => {
          this.content = graceRichText.format(res.data.content);
        })
      },
    }
  }
</script>