微信小程序解析富文本的几种方法

工作中有遇到过在小程序中需要解析后台管理系统设置的富文本内容,

一,可以使用wxParse插件解析html

使用方法

1.在github中下载 下载地址  https://github.com/icindy/wxParse/tree/master/wxParse

但是博住使用后 总是报

VM3004:1 thirdScriptError
html.replace is not a function;at api request success callback function

遍在网上找资料 在微信公众平台上面发现 小程序自带了 富文本标签

基本使用方法

1.在rich-text.wxml页面中使用 rech-text 标签

  1. <!-- rich-text.wxml -->
  2.  

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

    在rich-text.js页面中使用 绑定数据

    // rich-text.js

原文地址:https://www.cnblogs.com/ZZS-DYL/p/12205008.html

时间: 2024-11-05 16:01:08

微信小程序解析富文本的几种方法的相关文章

微信小程序template富文本插件image宽度被js强制设置

这段时间一直做微信小程序,过程中遇到了一个问题,这个问题一直没有得到完美的解决. 问题描述: 在Web编程中经常会引入template插件,这个插件是封装好,我们通常的做法是直接引入,配置简单,好用,一直都没出现什么大问题.但是这次在微信小程序上,问题就出现了. 因为手机屏幕普遍和PC比小很多,template正常情况下我们给content一个padding:1 30rpx 40rpx 30rpx;时富文本内容在手机屏幕上显示时两边有留白,页面会好看,也为了用户手握手机是不回方便看文本. 文本内

微信小程序传值取值的几种方法

一,列表index下的取值 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可 1.1生成值 <image src="../../../images/icon_delete.png" /><text>删除</text> //在删除图标与文字添加data-index="{{index}}"自定义属性以及绑定点击事件bindtap=&q

微信小程序解析html

1.下载wxParse:https://github.com/icindy/wxParse并拷贝到项目目录下与pages同级即可2.在app.wxss全局样式头部引入wxParse.wxss2.在需要解析html的js头部引入wxParse.js并加载数据,如: var WxParse = require('../../../wxParse/wxParse.js'); Page({ onLoad: function (options) { that.setData({ content: WxPa

微信小程序解析HTML标签带有&lt;p&gt;

小程序中默认是不支持html格式没有<p>标签,但是有些接口需要返回带有标签的,例如 : 隐私协议: 解决方法: 小程序中有一个富文本标签组件,前端可以解析H5标签就是 rich-text.wxParse 一.<rich-text> : <rich-text nodes="{{content}}"></rich-text> 微信小程序文档:https://developers.weixin.qq.com/miniprogram/dev/c

微信小程序访问豆瓣电影api400错误解决方法

最近在跟着demo学习微信小程序,却卡在了第一步请求豆瓣电影api上,折腾了很久,代码如下: wx.request({ url : "https://api.douban.com/v2/movie/in_theaters", data: {}, header:{ "Content-Type":"application/json" }, success: function(res) { console.log(res.data); var data

微信小程序中获取高度及设备的方法

由于js中可以采用操纵dom的方法来获取页面元素的高度,可是在微信小程序中不能操纵dom,经过查找之后发现仅仅只有以下几个方法可以获取到高度 wx.getSystemInfoSync().windowWidth // 获取当前窗口的宽度 wx.getSystemInfoSync().windowHeight // 获取当前窗口的高度 wx.getSystemInfoSync().model // 获取当前采用的设备 wx.getSystemInfoSync().pixelRatio wx.get

分享为小程序添加自动回复消息的5种方法!自动客服功能的微信小程序

如何通过小程序客服消息引导自动关注公众号? 小程序客服自动回复一个图文链接? 小程序客服可以发小程序卡片吗? 小程序客服能像公众号一样设置关键词回复吗? 收到消息时自动回复? 微信小程序新手如何默认自动回复功能 如果你遇到以上问题,请往下看!教大家实现微信小程序客服自动回复消息功能,以帮助我们更好地与客户进行互动. 当我们的小程序接入客服,在小程序前端增加一个客服按钮,用户可以点击按钮主动和我们的客服互动! 但是有个问题,消息那么多,如何才能接待的过来,能否想微信公众号一样自动回复,关键词回复,

微信小程序 —— 微信小程序解析html富文本插件wxParse

下载并把wxParse放到小程序的目录中 github下载地址:https://github.com/icindy/wxParse 一.基本使用方法 1. Copy文件夹wxParse,把wxParse放在与page同一级目录 - wxParse/ -wxParse.js(必须存在) -html2json.js(必须存在) -htmlparser.js(必须存在) -showdown.js(必须存在) -wxDiscode.js(必须存在) -wxParse.wxml(必须存在) -wxPars

微信小程序中rich-text文本溢出(三个...)

小程序中当rich-text中数据较多时就会出现溢出的现象 如下 此时的页面效果并不是很理想 此时我们可以在数据中给个div 加入  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;三个属性解决溢出问题 但这不是很好,如果数据从后台来上面方法就需要变通一下 如下 <rich-text nodes="<div style='overflow:hidden;white-space:nowrap;text-ove