文档章节

微信小程序开发--富文本插件wxParse的使用

第九程序
 第九程序
发布于 2017/07/12 09:56
字数 665
阅读 38
收藏 0

昨天一位网友问我小程序怎么解析富文本。他尝试过把html转出小程序的组件,但是还是不成功,我说可以把内容剥离出来。但是这两种方法都是不行了。后来找到了wxParse-微信小程序富文本解析组件

特性


Copy文件夹wxParse 基本使用方法

  • 这里写图片描述
- wxParse/
  -wxParse.js(必须存在)
  -html2json.js(必须存在)
  -htmlparser.js(必须存在)
  -showdown.js(必须存在)
  -wxDiscode.js(必须存在)
  -wxParse.wxml(必须存在)
  -wxParse.wxss(必须存在)
  -emojis(可选)
  •  
  • 引入必要文件
//在使用的View中引入WxParse模块
var WxParse = require('../../wxParse/wxParse.js');
  •  
//在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";
  •  
  • 数据绑定
var article = '

我是HTML代码

'; /** * 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);

  •  
  • 模版引用
// 引入模板
<import src="你的路径/wxParse/wxParse.wxml"/>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
  •  

注意点

在上面的基本使用里面在.js文件和.wxml文件里面出现的article这个是两个文件里面是一样的。但是article是js文件里面的一个变量是可以变的,只要保证js文件和wxml文件里面变量名一致即可。

实例

实例结构

这里写图片描述 
page页面是测试页面。

wxml文件

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

wxss文件

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

js文件

var WxParse = require('../../wxParse/wxParse.js');
data: {
  article: '<div style="text-align:center;">《静夜思》· 李白<br />床前明月光,<br />疑是地上霜。 <br />举头望明月, <br />低头思故乡。<br /><img src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53.jpg" alt="" /><br /><br /><img src="http://www.xiexingcun.com/Poetry/6/images/53b.jpg" alt="" /><br />div>',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
 var that = this;
 var temp = WxParse.wxParse('article', 'html', that.data.article, that, 5);
 that.setData({
   article: temp
 })
},
  •  

效果图

总结

这里使用这个插件并不难。但是需要主要data里面的那个变量article(这个名字是可变)在几个位置是一样的。需要看看小程序-template

© 著作权归作者所有

共有 人打赏支持
第九程序
粉丝 84
博文 142
码字总数 172691
作品 0
厦门
程序员
私信 提问
mpvue 微信小程序富文本解析

mpvue 是一个使用 Vue.js 开发小程序的前端框架。 按照官方的 快速上手 文档,如果之前接触过微信小程序开发和 Vue.js 的话,还是很容易上手的。 在这里主要记录一个第三方插件的使用: mpvu...

与蟒唯舞
07/30
0
0
小程序使用wxParse解析html

最近在做一个微信小程序项,遇到了文章的详情页面是富文本的情况,内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内...

未来的IT女神
07/05
0
0
搞定了微信小程序富文本渲染解决方案-后端渲染方案Html2Wxml2J

先介绍一下最近遇到的问题: 最近小程序项目中有文章详情页需要渲染富文本,微信小程序官方提供的<rich-text>是个弱鸡,很多标签不支持,用起来也麻烦,性能也不咋地。 吐槽完了,我们决定寻...

山东-小木
昨天
0
0
前端资源系列(3)-微信小程序开发资源汇总

微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者工具 - 官方 Egret Wing 3.2.x 支持微信...

xzavier
08/27
0
0
高大上的微信小程序中渲染html内容—技术分享

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题。但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 ...

IT智云编程
10/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里云ACM:云原生配置管理利器

摘要: 在传统架构中,如果配置信息有变更,通常是登陆服务器手动修改配置来使配置生效。在微服务架构中,应用数和节点数由于微服务化数量激增,导致发布次数增加,配置变更难度加大,通常是...

阿里云官方博客
7分钟前
1
0
js 对象合并

var o1 = { a: 1 };var o2 = { b: 2 };var o3 = { c: 3 };var obj = Object.assign(o1, o2, o3);console.log(obj); // { a: 1, b: 2, c: 3 }console.log(o1); // { a: 1, b: 2, c: 3 ......

zdglf
7分钟前
0
0
iframe引入方法

在js里定义: $(function () { $(".frameHead").load("../common/header.html"); $(".frameFoot").load("../common/footer.html"); }) 在需要导入iframe的页面添加标签<div class="frameHead......

kitty1116
7分钟前
0
0
华尔街留下的指标之王(附代码展示)

一. 写在前面的话 有人认为价格围绕价值上下波动,研究投资标的内在价值,于是就出现了基本面派; 有人为价格反映了一切,所有的信息(包括基本面)都反映到了盘面价格中,于是就有了技术面派...

酒逢知己千杯少
11分钟前
0
0
基于算法的建模--小结

中国龙-扬科
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部