微信小程序使用第三方组件wxParse加载富文本html

wxParse简介

wxParse 是一个微信小程序文本解析组件,支持支持Html及markdownwxml

wxParse gitHub地址https://github.com/icindy/wxParse

目前项目停止维护了,原因未知。

wxParse使用

  1. 按照gitHub上的指,下载demo之后,将里面的 wxParse 文件直接引入小程序的项目中。
    在这里插入图片描述
  2. 在 wxss引入 css 样式文件
@import "../../utils/wxParse/wxParse.wxss";

在这里插入图片描述
3. 在 wxml引用模版

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

<view class="wxParse">
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>
  1. js数据绑定
onLoad() {
    var article = this.data.content;
    var that = this;
    WxParse.wxParse('article', 'html', article, that, 5);
 },

其中 article 的内容应该包含富文本内容字符串

例子

这是一个富文本字符串

<h2 class='kc-course-harvest-title' style='-webkit-text-stroke-width:0px;background-color:rgb(255, 255, 255);box-sizing:border-box;color:rgb(15, 20, 25);font-family:&amp;quot;PingFang SC&amp;quot;, -apple-system, BlinkMacSystemFont, &amp;quot;Microsoft YaHei UI&amp;quot;, &amp;quot;Microsoft YaHei&amp;quot;, Roboto, &amp;quot;Hiragino Sans GB&amp;quot;, &amp;quot;Source Han Sans CN&amp;quot;, &amp;quot;Fira Sans&amp;quot;, &amp;quot;Droid Sans&amp;quot;, &amp;quot;Helvetica Neue&quot;, arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;font-size:18px;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;letter-spacing:normal;line-height:24px;margin:0px 0px 16px;orphans:2;text-align:start;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-break:break-word;word-spacing:0px;'><strong>你将获得</strong></h2><ul><li class='kc-list list' style='-webkit-text-stroke-width:0px;background-color:rgb(255, 255, 255);box-sizing:border-box;color:rgb(102, 114, 128);font-family:&quot;PingFang SC&quot;, -apple-system, BlinkMacSystemFont, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Roboto, &quot;Hiragino Sans GB&quot;, &quot;Source Han Sans CN&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;font-size:14px;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;list-style:outside none none;margin:0px;orphans:2;padding:0px;text-align:start;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-break:break-word;word-spacing:0px;'>全栈开发必备技能体系,HTML5+CSS3+JavaScript+C#+MySQL</li><li class='kc-list list' style='-webkit-text-stroke-width:0px;background-color:rgb(255, 255, 255);box-sizing:border-box;color:rgb(102, 114, 128);font-family:&quot;PingFang SC&quot;, -apple-system, BlinkMacSystemFont, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Roboto, &quot;Hiragino Sans GB&quot;, &quot;Source Han Sans CN&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;font-size:14px;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;list-style:outside none none;margin:0px;orphans:2;padding:0px;text-align:start;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-break:break-word;word-spacing:0px;'>业务场景真实实战项目,基础实战结合</li><li class='kc-list list' style='-webkit-text-stroke-width:0px;background-color:rgb(255, 255, 255);box-sizing:border-box;color:rgb(102, 114, 128);font-family:&quot;PingFang SC&quot;, -apple-system, BlinkMacSystemFont, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Roboto, &quot;Hiragino Sans GB&quot;, &quot;Source Han Sans CN&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;font-size:14px;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;list-style:outside none none;margin:0px;orphans:2;padding:0px;text-align:start;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-break:break-word;word-spacing:0px;'>手把手从零开始教学</li></ul>`

浏览器上的显示效果
在这里插入图片描述

使用 wxParse 在微信小程序里加载此富文本

js

const WxParse = require('../../utils/wxParse/wxParse.js')

Page({
    data: {
        content: `<h2 class='kc-course-harvest-title' style='-webkit-text-stroke-width:0px;background-color:rgb(255, 255, 255);box-sizing:border-box;color:rgb(15, 20, 25);font-family:&quot;PingFang SC&quot;, -apple-system, BlinkMacSystemFont, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Roboto, &quot;Hiragino Sans GB&quot;, &quot;Source Han Sans CN&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;font-size:18px;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;letter-spacing:normal;line-height:24px;margin:0px 0px 16px;orphans:2;text-align:start;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-break:break-word;word-spacing:0px;'><strong>你将获得</strong></h2><ul><li class='kc-list list' style='-webkit-text-stroke-width:0px;background-color:rgb(255, 255, 255);box-sizing:border-box;color:rgb(102, 114, 128);font-family:&quot;PingFang SC&quot;, -apple-system, BlinkMacSystemFont, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Roboto, &quot;Hiragino Sans GB&quot;, &quot;Source Han Sans CN&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;font-size:14px;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;list-style:outside none none;margin:0px;orphans:2;padding:0px;text-align:start;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-break:break-word;word-spacing:0px;'>全栈开发必备技能体系,HTML5+CSS3+JavaScript+C#+MySQL</li><li class='kc-list list' style='-webkit-text-stroke-width:0px;background-color:rgb(255, 255, 255);box-sizing:border-box;color:rgb(102, 114, 128);font-family:&quot;PingFang SC&quot;, -apple-system, BlinkMacSystemFont, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Roboto, &quot;Hiragino Sans GB&quot;, &quot;Source Han Sans CN&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;font-size:14px;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;list-style:outside none none;margin:0px;orphans:2;padding:0px;text-align:start;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-break:break-word;word-spacing:0px;'>业务场景真实实战项目,基础实战相结合</li><li class='kc-list list' style='-webkit-text-stroke-width:0px;background-color:rgb(255, 255, 255);box-sizing:border-box;color:rgb(102, 114, 128);font-family:&quot;PingFang SC&quot;, -apple-system, BlinkMacSystemFont, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, Roboto, &quot;Hiragino Sans GB&quot;, &quot;Source Han Sans CN&quot;, &quot;Fira Sans&quot;, &quot;Droid Sans&quot;, &quot;Helvetica Neue&quot;, arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;font-size:14px;font-style:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-weight:400;letter-spacing:normal;list-style:outside none none;margin:0px;orphans:2;padding:0px;text-align:start;text-decoration-color:initial;text-decoration-style:initial;text-decoration-thickness:initial;text-indent:0px;text-transform:none;white-space:normal;widows:2;word-break:break-word;word-spacing:0px;'>手把手从零开始教学</li></ul>`
    },

    onLoad() {
        var article = this.data.content.replace(/&quot;/g, '');;
        var that = this;
        WxParse.wxParse('article', 'html', article, that, 5);
    }
})

html

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

<view class="wxParse">
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

css

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

小程序里的显示效果如下

请添加图片描述

注意

  1. 富文本字符串中不应该有一些特殊字符例如 &quot;

如果加载富文本html,当字符显示了出来,那一般就是富文本字符串中包含了一些特殊字符,电脑浏览器可能识别,在微信小程序上会加载不出来。
在加载富文本的时候去掉 &quot; 即可

var article = this.data.content.replace(/&quot;/g, '');;
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);

原文地址:https://blog.csdn.net/Morris_/article/details/131534095

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_36054.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注