脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序解析富文本

微信小程序解析富文本过程详解

 更新时间：2019年07月13日 16:19:32   作者：赵客缦胡缨v吴钩霜雪明  
这篇文章主要介绍了微信小程序解析富文本过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值

前言

最近公司在开发OTA微信小程序，一些页面的详情内容是HTML富文本格式的的，但是微信小程序不能直接解析HTML，需要将内容中的HTML标签转换成微信小程序所支持的标签。

开始的时候想过自己写方法来替换标签，后来找到了一个很好用的插件：WxParse。

今天分享给大家，Github地址：https://github.com/icindy/wxParse

使用WxParse解析富文本数据

1．将下载下来的插件文件夹复制到我们的项目根目录下（其中emojis文件可根据自己所需决定要或者不要，其他的文件必须要）

- wxParse/
 -wxParse.js(必须存在)
 -html2json.js(必须存在)
 -htmlparser.js(必须存在)
 -showdown.js(必须存在)
 -wxDiscode.js(必须存在)
 -wxParse.wxml(必须存在)
 -wxParse.wxss(必须存在)
 -emojis(表情包文件，可选)

wxParse

2.在需要使用该插件的View（.js文件）中引入WxParse模块

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

3.在需要是用的wxss中引入WxParse.wxss，也可以在app.wxss中引入

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

4.进行数据绑定

Var article= '<div>我是HTML代码</div>'; 
/** 
* WxParse.wxParse(bindName , type, data,target,imagePadding) 
* 1.bindName绑定的数据名(必填) 
* 2.type可以为html或者md(必填) 
* 3.data为传入的具体数据(必填) 
* 4.target为Page对象,一般为this(必填) 
** 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选) 
*/ 
var that = this; 
WxParse.wxParse('article', 'html', article,that, 5);

5.在内容页（.wxml文件）中引用该模版文件，其中data中article为bindName

导入文件

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

引用模版

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

完成后页面就能够正常渲染HTML富文本数据了

示例

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • TypeScript中遍历对象键的方法

    TypeScript中遍历对象键的方法

    在日常的TypeScript开发中,经常需要遍历对象的键来执行各种操作,,在本文中,我们将深入研究这个问题,并提供几种解决方案,以便在遍历对象键时更安全、更灵活地操作,文中有详细的代码讲解,需要的朋友可以参考下
    2023-11-11
  • 最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式

    最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式

    这篇文章主要介绍了最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式,其中包含保留1位小数、保留2位小数、保留3位小数等正则,需要的朋友可以参考下
    2015-04-04
  • layui动态表头的实现代码

    layui动态表头的实现代码

    这篇文章主要介绍了layui动态表头的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • js返回顶部实例分享

    js返回顶部实例分享

    本文主要分享了js返回顶部的实例代码。可复制直接运行，方便快捷。有很好的参考价值，需要的朋友一起来看下吧
    2016-12-12
  • 如何使用原生Js实现随机点名详解

    如何使用原生Js实现随机点名详解

    这篇文章主要给大家介绍了关于如何使用原生Js实现随机点名的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 如何使用js正则表达式验证文件夹名是否符合规范

    如何使用js正则表达式验证文件夹名是否符合规范

    众所周知正则表达式非常强大,下面这篇文章主要给大家介绍了关于如何使用js正则表达式验证文件夹名是否符合规范的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • js中数组的常用方法小结

    js中数组的常用方法小结

    这篇文章主要介绍了js中数组的常用方法,结合实例形式分析了js中的常用数组方法,如push、concat、pop、splice、reverse、join等功能与用法,需要的朋友可以参考下
    2016-12-12
  • JavaScript的懒加载处理的方式

    JavaScript的懒加载处理的方式

    懒加载是一种优化技术,它可以延迟加载某些资源,直到它们真正需要被使用的时候才进行加载,实现懒加载的方法一般分为两种：基于 Intersection Observer API 的懒加载和基于滚动事件的懒加载,本文给大家介绍JavaScript的懒加载处理方式,感兴趣的朋友一起看看吧
    2023-10-10
  • JavaScript闭包实例讲解

    JavaScript闭包实例讲解

    众所周知，JavaScript没有块级作用域，只有函数作用域。那就意味着定义在函数中的参数和变量在函数外部是不可见的，而在一个函数内部任何位置定义的变量，在该函数内部任何地方都可见
    2014-04-04
  • JSON在Javascript中的使用（eval和JSON.parse的区别）详细解析

    JSON在Javascript中的使用（eval和JSON.parse的区别）详细解析

    这篇文章主要介绍了JSON在Javascript中的使用以及eval和JSON.parse的区别详细解析,本文对eval()和JSON.parse()的区别介绍的非常详细，需要的朋友可以参考下
    2017-09-09

最新评论