|
问题 上次博客解决了如何简单的使用网络api中的数据，但是api的数据多且复杂的话会有各种格式问题，比如api中的文字信息你想要在页面上显示，但是会有一堆前端乱码显示在页面上，今天我们就来解决这个问题。 
算法 这是在调用api数据时没有调整数据格式导致的问题，因为显示在页面上时显示的是html的格式，文字类的使用要用到。这里也就是小程序wxParse解析html富文本。 1.需要先下载wxParse到项目文件中，只需要下载在里面就行。 https://github.com/icindy/wxParse 2.将下载好的文件进行引用，分为js，wxml，wxss中， 首先，js文件中： | var WxParse = require('../wxParse/wxParse.js');//文件开头加上即可 |
然后是wxml： | <import src="../wxParse/wxParse.wxml" />//也是直接引用在开头就可以了 |
还有wxss： | @import "../wxParse/wxParse.wxss";//同上述开头 |
然后回到我们的js调用api的部分，在success函数后面加上更改我们html的设置，注意是在调用success函数后，fail和complete函数前面 var article = result.data.data[id].content;//请求数据
WxParse.wxParse('article', 'html',article,that,5); |
因为是文章的格式，这里就用到了相应的article的显示。 代码清单：js var WxParse = require('../wxParse/wxParse.js');
Page({
data:{
},
onLoad:function(e){
const id =e.id
console.log(id)
let that = this
wx-wx.request({
url: 'http://www.: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
})
var article = result.data.data[id].content;//请求数据
WxParse.wxParse('article', 'html',article,that,5);
},
fail: (res) => {},
complete: (res) => {},
})
},
}) |
代码清单：wxml <import src="../wxParse/wxParse.wxml" />
<view class="title">{{name}}</view>
<view class=" bianju content {{tabArr.curBdIndex=='id'? 'active' : ''}}">
<template is="wxParse" data="{{wxParseData:article.nodes}}" />
</view> |
结语
本次解决了小程序在使用api时，html内容出现显示错误的问题。
|
