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

这篇具有很好参考价值的文章主要介绍了微信小程序使用第三方组件wxParse加载富文本html。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

wxParse简介

wxParse 是一个微信小程序富文本解析组件,支持支持Html及markdown转wxml。

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

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

wxParse使用

  1. 按照gitHub上的指,下载demo之后,将里面的 wxParse 文件直接引入到小程序的项目中。
    微信小程序使用第三方组件wxParse加载富文本html,微信小程序,微信小程序富文本,wxParse,wxParse加载富文本,富文本html
  2. 在 wxss 中 引入 css 样式文件
@import "../../utils/wxParse/wxParse.wxss";

微信小程序使用第三方组件wxParse加载富文本html,微信小程序,微信小程序富文本,wxParse,wxParse加载富文本,富文本html
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:&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>`

在浏览器上的显示效果:
微信小程序使用第三方组件wxParse加载富文本html,微信小程序,微信小程序富文本,wxParse,wxParse加载富文本,富文本html

使用 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";

在小程序里的显示效果如下:

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

注意

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

如果加载富文本html,当字符串显示了出来,那一般就是富文本字符串中包含了一些特殊字符,电脑浏览器可能识别,在微信小程序上会加载不出来。
在加载富文本的时候,去掉 &quot; 即可。文章来源地址https://www.toymoban.com/news/detail-522048.html

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

到了这里,关于微信小程序使用第三方组件wxParse加载富文本html的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用 npm 安装第三方包

    微信小程序支持使用 npm 安装第三方包。 在小程序根目录下执行 npm install 第三方包名 安装 npm 包。 点击开发者工具中的菜单栏: 工具 -- 构建 npm 完成构建。 就可以使用 npm 包了。

    2024年02月11日
    浏览(72)
  • 微信小程序使用webview打开第三方地址

    1、在page下创建一个webview目录文件包含index.js index.wxml,配置好路由 2、index.js 3、index.wxml 4、跳转 (地址后拼接参数需要转码) 注意:webview页面的title 取得是第三方地址的title标签的内容,且webview页面不支持自定义标题

    2024年02月10日
    浏览(69)
  • 微信小程序使用nginx跳转第三方url

    先在微信公众平台配置号域名   服务器域名和业务域名都配置好 然后微信小程序使用 web-view标签进行跳转 nginx配置:域名必须有ssl证书,不然还是访问不了 sub_filter如果nginx没装的话需要装一下 首先需要git安装 ngx_http_substitutions_filter_module git没安装:yum -y install git 安装了:

    2024年02月10日
    浏览(59)
  • 微信小程序第三方登录

    目录 小程序第三方登录操作流程如下: 1.第一步 2.第二步 2.第三步 4.第四步 5.第五步 注意:如果第一步没打印出来,看看微信模拟器上的Id有没有更改,或则去源码试图,weixinId更改 进入uniapp官网=Api=第三方服务=登录=微信小程序登录 创建一个触发事件,获取头像和名称 调用

    2024年02月13日
    浏览(77)
  • 如何在微信小程序里面使用npm安装第三方插件(以安装vant ui为例)

    1.在cmd里或者是终端里,找到对应的项目,并执行下面的命令,用来初始化package.json文件。 2.勾选下图选项 3.执行下面的命令安装vant ui 然后你会发现多了一个node_modules文件, 里面存的就是第三方组件。 4.最后一步,每次安装完一个新的第三方插件都要执行“构建npm” 执行完

    2024年02月14日
    浏览(68)
  • 微信小程序第三方插件申请

    记录下小程序申请插件的页面,之前自己找了很久,方便后续使用 1. 先找到自己需要的第三方插件的appid 2. 登录微信公众平台后台(mp.weixin.qq.com) 3. 打开小程序插件页面          https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=插件appid         如小程序直播的页面就是:http

    2024年02月09日
    浏览(59)
  • app第三方支付,微信小程序支付

    最近公司开发一个app,需要从app跳转到小程序去微信支付,当时在网上看了好长时间没有看到适合自己的,在这里记录一下,也方便自己以后可以再复习一下,毕竟本人脑子不太好使,只能记下来。 app跳转页面携带参数到小程序 小程序接收参数,拉起微信支付

    2024年02月16日
    浏览(79)
  • 微信小程序跳转第三方页面

    使用web-view,官方说明web-view 承载网页的容器。会自动铺满整个小程序页面, 个人类型的小程序暂不支持使用 具体实现思路: 1、首先需要配置小程序的公众平台当中的开发管理选项的业务域名,具体看官方指引 2、在小程序当中新建一个页面文件来单独存放web-view组件,sr

    2024年02月11日
    浏览(71)
  • uniapp微信小程序引入第三方广告插件

      以Slime广告插件为例。 一、微信小程序后台申请相关插件   二、manifest.json文件 三、pages.json文件 四、要使用该插件的vue页面 引用插件后就可以使用插件的相关方法。 附:Slime插件文档 Slime | 小程序插件 | 微信公众平台

    2024年02月11日
    浏览(74)
  • 如何为微信小程序添加第三方支付功能

    随着微信小程序的普及和应用,越来越多的商家希望在小程序中接入第三方支付功能,以提高用户购买体验和支付安全性。本文将详细介绍如何为微信小程序添加第三方支付功能,并提供具体的开发流程及注意事项。 一、什么是第三方支付 第三方支付平台是指一种网上支付

    2024年02月07日
    浏览(76)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包