广告位联系
返回顶部
分享到

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

微信小程序 来源:互联网搜集 作者:秩名 发布时间:2019-07-14 09:23:09 人浏览
摘要

本篇文章介绍微信小程序解析富文本过程详解 Github地址: https://github.com/icindy/wxParse 使用WxParse解析富文本数据 1.将下载下来的插件文件夹复制到我们的项目根目录下(其中emojis文件可根据自己所需决定要或者不要,其他的文件必须要) - wxParse/

本篇文章介绍微信小程序解析富文本过程详解

Github地址:https://github.com/icindy/wxParse-[-/a>

使用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富文本数据了

示例



 


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://www.jianshu.com/p/0f84b5a4ed95
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计