微信小程序富文本 rich-text wxParse (Html、Markdown)


一、小程序富文本原生组件rich-text( 官方文档 )
使用方法:

<rich-text nodes="{{Content}}"></rich-text>

优点:方便快捷
缺点:
1.不支持视频
2.仅支持网络图片

二、推荐第三方富文本组件wxParser( 文档 )
支持视频video标签
预览一下成果:
微信小程序富文本 rich-text wxParse (Html、Markdown)_第1张图片
使用方法:

1.下载wxParse文件夹
放入微信小程序目录下
微信小程序富文本 rich-text wxParse (Html、Markdown)_第2张图片
2.实现代码
wxss:

//在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";

js:

//在使用的View中引入WxParse模块
var WxParse = require('../../wxParse/wxParse.js');

微信小程序富文本 rich-text wxParse (Html、Markdown)_第3张图片
富文本数据赋值
微信小程序富文本 rich-text wxParse (Html、Markdown)_第4张图片
wxml:

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

微信小程序富文本 rich-text wxParse (Html、Markdown)_第5张图片

你可能感兴趣的:(前端)