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 ...
随机推荐
- 【架构】从instagram学习最小化IT是怎么做的
Keep it very simple (极简主义) Don't re-invent the wheel (不重复发明轮子) Go with proven and solid technologies ...
- Python文件读写--错误一
在学习python的文件读写操作的时候,我遇到了一点麻烦事,觉得可以记录下来,先上代码吧. with open('test.txt') as file: file.write('test') prin ...
- 华为交换机配置ACL详细步骤
ACL 介绍 #2000-2999普通ACL,根据源IP过滤 #3000-3999高级ACL,根据源目的端口和源目的地址等过滤 #4000-4999二层ACL,根据源目的MAC等过滤 配置举例: 拒绝 ...
- 面向对象编程(C++篇3)——析构
目录 1. 概述 2. 详论 2.1. 对象生命周期 2.2. 不一定需要显式析构 2.3. 析构的必要性 3. 总结 1. 概述 类的析构函数执行与构造函数相反的操作,当对象结束其生命周期,程序就会 ...
- 05tensorflow分布式会话
一. tensorflow分布式 1. 概念 分布式Tensorflow是由高性能的gRPC框架作为底层技术来支持的.这是一个通信框架gRPC(google remote procedure ...
- CentOS7.5环境下Docker环境搭建
1. 安装wget工具: yum install wget -y 2. 使用wget工具从docker官网下载yum源: wget -P /etc/yum.repos.d/ https://downl ...
- k8s原来这么简单(一)核心组件与工作原理
k8s官方文档:https://kubernetes.io/zh/docs/home/ 前提 掌握容器技术:Docker,Containerd等 K8S优势 使用简单,少量人/小团队可以轻松维护大型 ...
- 部署 Nginx +uwsgi+centos7+django+supervisor 项目
部署CRM项目 前言 使用软件 nginx 使用nginx是为了它的反向代理功能,项目会通过Django+uWSGI+Nginx进行服务器线上部署. uWSGI python web服务器开发使用WS ...
- VS2022 安装.NET 3.5/.NET 4/.NET 4.5/.NET 4.5.1目标包的方法
最近重装了系统,就装了一个Visual Studio 2022,发现之前的老项目打不开了,需要下载目标包,但是在Visual Studio Installer 里面无法安装 .NET 3.5/.NET ...
- 变频器通讯参数PKW和PZD的含义
SINAMICS S120 S150 参数手册 章节3.9 PROFIdrive 图3-41 功能图2422制造商专用报文和过程数据 参考:https://www.diangon.com/wenku/ ...