uni-app 解析后台接口返回的HTML
正常使用rich-text是可以解决问题的,但是在支付宝小程序中不显示,在文档中看到“ 支付宝小程序 nodes 属性只支持使用 Array 类型。如果需要支持 HTML String,则需要自己将 HTML String转化为 nodes 数组,可使用 html-parser 转换。”这句话
结果OK
html:
<view class="article-content">
<rich-text :nodes="htmlNodes"></rich-text>
</view>
<!-- #ifdef MP-WEIXIN -->
<ad v-if="htmlNodes.length > 0" unit-id="adunit-01b7a010bf53d74e"></ad>
<!-- #endif -->
js:
引入:import htmlParser from '@/common/html-parser'
data(){
return {
htmlNodes: []
}
}
接口请求数据:
this.$request({
url: url,
data: data,
success: (res) => {
console.log('0000',res.data.data)
var htmlString = res.data.data.content.replace(/\\/g, "").replace(/<img/g, "<img style=\"display:none;\"");
this.htmlNodes = htmlParser(htmlString);
this.dataNotice = res.data.data;
},
})
uni-app 解析后台接口返回的HTML的更多相关文章
- JS前端取得并解析后台服务器返回的JSON数据的方法
摘要:主要介绍:使用eval函数解析JSON数据:$.getJSON()方法获得服务器返回的JSON数据 JavaScript eval() 函数 eval(string) 函数可计算某个字符串,并执 ...
- react中处理后台接口返回存在html标签的字符串
render{ return( <div> <div>接下来是例子</div> <div dangerouslySetInnerHTML={{__html:& ...
- vue 根据接口返回的状态码判断用户登录状态并跳转登录页,登录后回到上一个页面(http拦截器)
背景:后台接口返回code==501表示用户是未登录状态,需要登录才可访问: 通过http拦截做路由跳转 第一步:src目录下新建http.js文件,内容如下: import Axios from ' ...
- app与php后台接口登录认证、验证(seesion和token)
简要:随着电商的不断发展,APP也层次不穷,随着科技的发展主要登录形式(微信.QQ.账号/密码):为此向大家分享一下"app与php后台接口登录认证.验证"想法和做法:希望能够帮助 ...
- 通过 Ajax 调取后台接口将返回的 json 数据绑定在页面上
第一步: 编写基础的 html 框架内容,并引入 jquery: <!doctype html> <html lang="en"> <head> ...
- WebAPI接口返回ArrayList包含Dictionary对象正确解析
一.问题提出 为了减少流量,将key-value(键值对)直接输出到Dictionary<string, string>,接口返回结果如下: 其中{}里面内容如下: 上图显示600是键,4 ...
- [C#]Winform后台提交数据且获取远程接口返回的XML数据,转换成DataSet
#region 接口返回的Xml转换成DataSet /// <summary> /// 返回的Xml转换成DataSet /// </summary> /// <par ...
- 【Golang 接口自动化04】 解析接口返回JSON串
前言 上一次我们一起学习了如何解析接口返回的XML数据,这一次我们一起来学习JSON的解析方法. JSON(Javascript Object Notation)是一种轻量级的数据交换语言,以文字为基 ...
- 【Golang 接口自动化03】 解析接口返回XML
上一篇我们学习了怎么发送各种数据类型的http请求,这一篇我们来介绍怎么来解析接口返回的XML的数据. 解析接口返回数据 定义结构体 假设我们现在有一个接口返回的数据resp如下: <?xml ...
随机推荐
- jquery, js轮播图插件Swiper3
轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...
- 从刘维尔方程到Velocity-Verlet算法
技术背景 我们说分子动力学模拟是一个牛顿力学的过程,在使用量子化学的手段或者深度学习的方法或者传统的力场方法,去得到某个时刻某个位置的受力之后,就可以获取下一步的整个系统的状态信息.这个演化的过程所使 ...
- Python 让我舅舅的书法作品和 PIL 库发生点美的误会
Python 让我舅舅的书法作品和 PIL 库发生点美的误会 1. 前言 不久之前写过一篇文章,详细介绍了 PIL 库中的 Image 模块的使用.曾经学习过.使用过一段时间的 PS,认识 PIL 后 ...
- php 魔术方法,未声明属性,数组的注释 - 帮助ide跳转,提高可读性
本人使用vscode编辑器.其他编辑器未测试. 经过1: 用laravel开发了一段时间,最麻烦的一点就是许多时候编辑器无法智能提示和辅助跳转. 有一款ide-helper的插件,感觉不是很好用,经常 ...
- Net6 Configuration & Options 源码分析 Part2 Options
Net6 Configuration & Options 源码分析 Part2 Options 第二部分主要记录Options 模型 OptionsConfigurationServiceCo ...
- wms、wmts、wfs等地图服务区别
OGC OGC 全称是开放地理空间信息联盟(Open Geospatial Consortium),是一个非盈利的国际标准组织,它制定了数据和服务的一系列标准,GIS厂商按照这个标准进行开发可 ...
- 【Vulnhub练习】Acid
靶机信息 下载链接 https://download.vulnhub.com/acid/Acid.rar 靶机说明 Welcome to the world of Acid. Fairy tails ...
- KCP协议:从TCP到UDP家族QUIC/KCP/ENET
行文前先安利下<再深谈TCP/IP三步握手&四步挥手原理及衍生问题-长文解剖IP >.<再谈UDP协议-浅入理解深度记忆> KCP协议科普 KCP是一个快速可靠协议,能 ...
- 图解CompletableFuture源码
前言 关于CompletableFuture源码解析部分,整体上感觉还是写比较难的,不过为了推广到团队还是要好好搞一下的,我还是希望大家看到这边文章能学到点什么,废话不多说开始吧. 属性部分 首先看属 ...
- [源码解析] TensorFlow 分布式环境(5) --- Session
[源码解析] TensorFlow 分布式环境(5) --- Session 目录 [源码解析] TensorFlow 分布式环境(5) --- Session 1. 概述 1.1 Session 分 ...