微信小程序网络请求api中HTML格式问题

简介: 微信小程序网络请求api中HTML格式问题

问题

上次博客解决了如何简单的使用网络api中的数据,但是api的数据多且复杂的话会有各种格式问题,比如api中的文字信息你想要在页面上显示,但是会有一堆前端乱码显示在页面上,今天我们就来解决这个问题。


算法

这是在调用api数据时没有调整数据格式导致的问题,因为显示在页面上时显示的是html的格式,文字类的使用要用到。这里也就是小程序wxParse解析html富文本。

1.需要先下载wxParse到项目文件中,只需要下载在里面就行。

https://github.com/icindy/wxParse

2.将下载好的文件进行引用,分为js,wxml,wxss中,

首先,js文件中:

varWxParse=require('../wxParse/wxParse.js');//文件开头加上即可

然后是wxml:

<importsrc="../wxParse/wxParse.wxml" />//也是直接引用在开头就可以了

还有wxss:

@import"../wxParse/wxParse.wxss";//同上述开头

然后回到我们的js调用api的部分,在success函数后面加上更改我们html的设置,注意是在调用success函数后,fail和complete函数前面

vararticle=result.data.data[id].content;//请求数据
       WxParse.wxParse('article','html',article,that,5);

因为是文章的格式,这里就用到了相应的article的显示。

代码清单:js

varWxParse=require('../wxParse/wxParse.js');
Page({
    data:{
   },
   onLoad:function(e){
     constid=e.id
     console.log(id)
     letthat=this
     wx-wx.request({
        url:'http://www.hladmin.cn:8088/public/spg/poi/list/',
        data:{
       },
        header:{'content-type':'application/json'},
        method:'POST',
        dataType:'json',
        responseType:'text',
       success:(result)=>{
         // console.log(result)
         that.setData({
           // content:result.data.data[id].content,
            latitude:result.data.data[id].latitude,
            longtitude:result.data.data[id].longitude,
            id:result.data.data[id].id,
            name:result.data.data[id].name,
            img:result.data.data[id].cover
       })
       vararticle=result.data.data[id].content;//请求数据
       WxParse.wxParse('article','html',article,that,5);
       },
       fail:(res)=>{},
       complete:(res)=>{},
     })
   },
})

代码清单:wxml

<importsrc="../wxParse/wxParse.wxml" />
<viewclass="title">{{name}}</view>
<viewclass=" bianju content {{tabArr.curBdIndex=='id'?'active':''}}">
   <templateis="wxParsedata="{{wxParseData:article.nodes}}" />
</view>


结语

本次解决了小程序在使用api时,html内容出现显示错误的问题。

目录
相关文章
|
13天前
|
XML 数据采集 API
用Lxml高效解析XML格式数据:以天气API为例
免费Python教程:实战解析中国天气网XML数据,详解Lxml库高效解析技巧、XPath用法、流式处理大文件及IP封禁应对策略,助你构建稳定数据采集系统。
108 0
|
前端开发
html 格式
【10月更文挑战第14天】html 格式
723 4
|
编解码 前端开发 UED
HTML多媒体格式支持与优化
在HTML中,多媒体格式的支持与优化至关重要。使用`&lt;audio&gt;`、`&lt;video&gt;`和`&lt;img&gt;`标签可分别嵌入音频、视频和图像。支持的格式包括MP3、OGG、JPEG等。为优化体验,应压缩文件、采用响应式设计、使用懒加载,并考虑转码及CDN托管。此外,添加字幕和描述文件可提高辅助功能。遵循这些最佳实践,能显著提升多媒体内容的加载速度与用户满意度。
|
8月前
|
存储 API 文件存储
单页图床HTML源码+本地API接口图床系统源码
图床系统是一种用于存储和管理图片文件的在线服务。它允许用户上传图片文件,并生成相应的图片链接,从而方便用户在网页、社交媒体或其他平台上分享图片。
311 2
单页图床HTML源码+本地API接口图床系统源码
|
9月前
|
JSON 前端开发 搜索推荐
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
|
9月前
|
JavaScript
jQuery+HTML5实现的微信大转盘抽奖源码
这是一款基于jQuery+HTML5实现的微信大转盘抽奖效果源码,是一款可配置奖品抽奖的jQuery大转盘抽奖代码,可实现点击按钮转轮旋转实现抽奖功能,效果逼真自然,代码里面有详细的注释,可以修改文字或者二次开发都可以
234 11
|
8月前
|
缓存 小程序 API
微信小程序网络请求与API调用:实现数据交互
本文深入探讨了微信小程序的网络请求与API调用,涵盖`wx.request`的基本用法、常见场景(如获取数据、提交表单、上传和下载文件)及注意事项(如域名配置、HTTPS协议、超时设置和并发限制)。通过一个简单案例,演示了如何实现小程序与服务器的数据交互。掌握这些技能将帮助你构建功能更丰富的应用。
|
10月前
|
JSON API 数据格式
获取商品详情API的请求格式是什么
获取商品详情API的请求格式通常依赖于特定的电商平台或服务提供商,但一般遵循类似的结构。以下是一个概括性的说明,以及针对几个主流电商平台的示例:
|
11月前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
ThinkPHP 通用的API格式封装
本文介绍了在ThinkPHP框架中如何统一封装API返回格式的方法,包括创建状态码枚举类、编写统一格式化函数以及在BaseController和Error控制器中重写`__call`方法来处理不存在的方法或控制器调用,以实现统一的错误处理和返回格式。
ThinkPHP 通用的API格式封装