微信小程序网络请求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内容出现显示错误的问题。

目录
相关文章
|
11天前
|
Java 网络安全 数据安全/隐私保护
javaMai+Springl实现给QQ邮箱发邮件(带附件,html格式)
javaMai+Springl实现给QQ邮箱发邮件(带附件,html格式)
13 0
|
11天前
|
前端开发 小程序 API
【微信小程序】-- 使用 npm 包 - API Promise化(四十二)
【微信小程序】-- 使用 npm 包 - API Promise化(四十二)
|
11天前
|
存储 JavaScript 前端开发
HTML API
HTML API
27 3
|
11天前
|
小程序
微信小程序中识别HTML标签的方法
微信小程序中识别HTML标签的方法
|
2天前
|
JavaScript 小程序 Java
基于微信小程序的网络安全科普系统的设计与实现(源码+lw+部署文档+讲解等)
基于微信小程序的网络安全科普系统的设计与实现(源码+lw+部署文档+讲解等)
|
11天前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
19 4
|
11天前
|
移动开发 API UED
【专栏:HTML进阶篇】HTML5拖放API与触摸事件
【4月更文挑战第30天】HTML5的拖放API和触摸事件增强了网页交互设计,使开发者能创建动态响应式界面。拖放API通过设定元素的`draggable`属性、监听拖动和放置事件以及处理`DataTransfer`对象实现。触摸事件如`touchstart`、`touchmove`、`touchend`则让触控设备操作更流畅。开发者需注意事件对象、多点触控处理和防止默认行为。结合两者,可创建图片排序、手势识别等交互功能,但也需面对浏览器兼容性和复杂逻辑挑战。利用HTML5这些工具,能提升用户体验,推动网页交互设计创新。
|
11天前
|
人工智能 机器人 API
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
【Python+微信】【企业微信开发入坑指北】3. 如何利用企业微信API给微信群推送消息
36 0
|
11天前
|
缓存 人工智能 API
【Python+微信】【企业微信开发入坑指北】2. 如何利用企业微信API主动给用户发应用消息
【Python+微信】【企业微信开发入坑指北】2. 如何利用企业微信API主动给用户发应用消息
26 0
|
11天前
|
小程序 安全 Android开发
微信小程序中识别HTML标签的方法
微信小程序中识别HTML标签的方法
40 1

热门文章

最新文章