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

算法与编程之美

发布于 2022-05-23 15:05:04

8430

发布于 2022-05-23 15:05:04

文章被收录于专栏：算法与编程之美算法与编程之美

问题

上次博客解决了如何简单的使用网络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.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
        })
        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内容出现显示错误的问题。

稿件来源：深度学习与文旅应用实验室（DLETA）

作者：沈志坚

主编：欧洋

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2022-04-21，如有侵权请联系 cloudcommunity@tencent.com 删除

api