问题
上次博客解决了如何简单的使用网络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="wxParse" data="{{wxParseData:article.nodes}}" /> </view> |
结语
本次解决了小程序在使用api时，html内容出现显示错误的问题。
