wxParse-微信小程序解析富文本组件的使用总结
wxParse是一款非常好用的解析微信小程序中富文本的组件,支持大部分的html标签:
#####基本使用方法:
(1)Copy文件夹wxParse ,放在小程序根目录下。
- wxParse/
-wxParse.js(必须存在)
-html2json.js(必须存在)
-htmlparser.js(必须存在)
-showdown.js(必须存在)
-wxDiscode.js(必须存在)
-wxParse.wxml(必须存在)
-wxParse.wxss(必须存在)
-emojis(可选)
(2)引入文件:
//在使用的view的js中引入WxParse模块
var WxParse = require(’…/…/wxParse/wxParse.js’);
//在使用的Wxss中引入WxParse.css,也可以在app.wxss中引入
@import “/wxParse/wxParse.wxss”;
// 在使用的view的.wxml中引入模板#####1.单数据渲染:
(1)在data中声明article变量:
article:'<div class="content"><h3 class="main-title">白内障</h3><h4 class="sub-title">需要注意什么?</h4><div class="desc><p>1.减少辐射,防紫外线,特别是要避开强光紫外线。如看电视的距离尽量远一点,不要长时间看手机,夏季外出时打遮阳伞、带防紫外线的太阳眼镜等; </p><p>2.平时多喝水,避免机体缺水。老年人体内缺水是导致晶体变浑浊的原因之一,因此平常要养成多喝水的习惯;[M3] </p><img class="img" src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /></div></div>'
(2)在onload声明周期中使用:
``
WxParse.wxParse(‘article’, ‘html’, this.data.article, this, 5);
/**
- WxParse.wxParse(bindName , type, data, target,imagePadding)
- 1.bindName绑定的数据名(必填)
- 2.type可以为html或者md(必填):
- 但在实际应用中,发现此插件比较倾向于处理 html 的解析,对于 markdown语法只是简单的兼容。
- 3.data为传入的具体数据(必填)
- 4.target为Page对象,一般为this(必填)
- 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
(3)在.wxml中使用:
`` 在上面的基本使用里面在.js文件和.wxml文件里面出现的article这个是两个文件里面是一样的。article是js文件里面的一个变量是可以变的,只需保证js文件和wxml文件里面变量名一致即可。
#####2.数组循环渲染
(1).数据格式:
list: [ { name: 'CataResult', id: '7', content: '<div class="content"><h3 class="main-title">白内障</h3><h4 class="sub-title">需要注意什么?</h4><div class="desc><p>1.减少辐射,防紫外线,特别是要避开强光紫外线。如看电视的距离尽量远一点,不要长时间看手机,夏季外出时打遮阳伞、带防紫外线的太阳眼镜等; </p><p>2.平时多喝水,避免机体缺水。老年人体内缺水是导致晶体变浑浊的原因之一,因此平常要养成多喝水的习惯;[M3] </p><img class="img" src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /></div></div>' }, { name: 'CataResult', id: '8', content: '<div class="content"><h3 class="main-title">白内障</h3><h4 class="sub-title">需要注意什么?</h4><div class="desc><p>1.减少辐射,防紫外线,特别是要避开强光紫外线。如看电视的距离尽量远一点,不要长时间看手机,夏季外出时打遮阳伞、带防紫外线的太阳眼镜等; </p><p>2.平时多喝水,避免机体缺水。老年人体内缺水是导致晶体变浑浊的原因之一,因此平常要养成多喝水的习惯;[M3] </p><img class="img" src="http://www.xiexingcun.com/Poetry/6/images/53e.jpg" alt="" /></div></div>'} ]
(2).循环绑定数据:
``
for (let i = 0; i < that.data.list.length; i++) {
WxParse.wxParse(‘item’ + i, ‘html’, that.data.list[i].content, that);
if (i === that.data.list.length - 1) {
WxParse.wxParseTemArray(“list”, ‘item’, that.data.list.length, that)
}
}
/**
WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)
1.temArrayName: 为你调用时的数组名称
3.bindNameReg为循环的共同体 如绑定为reply1,reply2…则bindNameReg = ‘reply’
3.total为reply的个数
*/
(3).模板中使用
<!-- 富文本渲染你内容 --><block wx:for="{{list}}" wx:key=""><template is="wxParse" data="{{wxParseData:item}}" /></block>
``
以上是本人在实际工作中的一些小小的总结,不足之处还请大家多多指教。
wxParse-微信小程序解析富文本组件的使用总结相关推荐
- 小程序(二十六)微信小程序解析富文本的几种方式
微信小程序解析富文本html大概有两种方式(我发现的). 两种方法,各有各的优缺点. 一:使用小程序内置标签rich-text 这个标签解析的富文本会保留你在pc端编辑的样式,也就是说,你在pc端编辑 ...
- 微信小程序富文本解析点击图片放大_微信小程序解析富文本过程详解
前言 最近公司在开发OTA微信小程序,一些页面的详情内容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要将内容中的HTML标签转换成微信小程序所支持的标签. 开始的时候想过自己写方法 ...
- 微信小程序解析富文本的方法
1.可以使用wxParse插件解析html 2.下载后复制到自己的小程序项目中 3.设置全局样式 @import "./wxParse/wxParse.wxss"; 4.在需要调用 ...
- 微信小程序端富文本输入
有个需求是用户端也就是小程序端,需要可以富文本发布文章. 示例: 1. 下载组件-微信小程序editor富文本编辑器组件 2.放在小程序自定义组件文件夹下 3.需要用到的页面引入该组件 "u ...
- 【愚公系列】2022年08月 微信小程序-(rich-text)富文本和(text)文本的详解
文章目录 前言 一.富文本使用 1.富文本的基本使用 2.富文本中预览图片 2.1 原生使用 2.2 组件封装使用 2.2.1 组件封装 2.2.2 组件使用 二.文本 1.文本属性 前言 富文本格式 ...
- 若依前后端分离发布富文本框内容 | uni-app微信小程序展示富文本框内容
微信小程序端引入富文本样式 富文本提交图片json error 一.展示示例: 1.PC端前端发布界面 可以设置文字大小,居中,可以插入图片,设置图片大小,居中. 2.小程序端展示 二.基于若依框架踩 ...
- 微信小程序rich-text富文本图片
背景: 本地做微信小程序项目,后台通过富文本编辑器编辑内容,在小程序页面展示时使用rich-text遇到了图片不能展示和图片尺寸过大的问题. 问题一:富文本编辑器中的图片无法展示 <rich-t ...
- 微信小程序rich-text富文本图片自适应处理
最近在做小程序,在处理富文本图片时没做相应处理,图片width没有自适应 简单的定义:img{max-width: 100%;}并没有生效 说明:微信小程序rich-text,对于样式定义仅支持sty ...
- 小程序 封装富文本组件
富文本对于编辑文章什么的还是挺重要的.我封装了个功能比较齐全的富文本组件,方便以后项目可以使用,在这里分享出来,直接复制粘贴代码就可以直接使用啦! 效果图: 1.先创建一个组件 2.直接上组件edit ...
最新文章
- python自动排课表_【python-leetcode210-拓扑排序】课程表Ⅱ
- 二维动态规划降维误差一般为多少_动态规划 所有题型的总结
- leetcode60.第k个排列java题解
- Web应用开发中的几个问题
- 错误 undefined reference to __cxa_guard_acquire/release
- python如何读取kepsever_python linecache读取过程
- 骁龙660鸿蒙系统,骁龙660双摄测试机偷跑 核心数/GPU证实
- java回调函数的生命_Java的回调函数 - choaklin 的个人空间 - OSCHINA - 中文开源技术交流社区...
- 2019春运大幕即将开启 西安动车列车员整装迎春运
- java1.6升级1.7_jdk从1.6升级到1.7可能会遇到的Version问题
- Python 如何在csv中定位非数字和字母的符号
- 三色交替的下拉列表框
- php数组和字符串转换
- 禾川plc编程软件_HCP Works下载 HCP Works(禾川PLC编程软件) v2.26.01.92012 官方安装版 下载-脚本之家...
- 数据库可疑修复的方法
- mi5x的Android的版本,小米5XMIUI11最新稳定版刷机包(最新系统完整固件升级吧安卓8.0)...
- 408 操作系统 知识点总结
- 栈的主要特点及实例应用
- 计算机网络速度慢原因,上网网速变慢的几个原因及解决方法
- 2013 CocoaChina微信精选之技术汇