微信小程序网络请求api中HTML格式问题
问题
上次博客解决了如何简单的使用网络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）
作者：沈志坚
主编：欧洋
微信小程序网络请求api中HTML格式问题相关推荐
- 5、微信小程序-网络请求和本地存储
文章目录 前言 一.准备 二.网络请求 1.微信小程序请求网络的方法 2.发送网络请求 3.网络请求的封装 4.网络返回请求数据的处理 三.本地存储 前言 这节我们来看下在微信小程序中如何进行网络请求 ...
- 微信小程序网络请求异常怎么办_解决·微信小程序开发-网络请求报Invalid request 400错误...
今天学习了一下微信小程序的入门开发,在使用网络请求时,发现根据微信官方的API的方法进行操作出现Invalid request 400错误,到底怎么回事呢? 首先我们来看微信API网络请求 示例代码: ...
- 微信小程序 网络请求接口 及 生命周期
前言:前期我们对微信小程序有些基本了解,像标签,样式,组件....等. 今天我们继前期进行继续的了解 一. 网络请求 HTTP(HyperText Transfer Protocol)是一套计算机通过 ...
- 微信小程序网络请求异常怎么办_监控微信小程序wx.request请求失败
在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...
- 微信小程序网络请求配置问题及本地网络请求测试解决方案
本文只针对服务器网站没有备案或只需要做本地网络接口请求 一.问题引入 在小程序demo.wxml中声明button控件,并设置点击事件,如下: <button bindtap='testSend ...
- 微信小程序网络请求代码片段
在微信小程序根目录建立/static/js/lsk.js.输入以下代码 function dopost(api,params,callback){var webhost="http://ne ...
- 微信小程序 网络请求之设置合法域名
设置域名 登录微信公众号后台小程序中 设置→开发设置→服务器设置 必须设置域名,微信小程序才能进行网络通讯,不然会报错 如果设置好了合法域名,开发工具还提示不在合法域名列表中,因为在微信会有一段时间的 ...
- 微信小程序网络请求之设置合法域名后不显示oss、cos的图片问题
一.开启oss防盗链设置 把此https://servicewechat.com链接加入到防盗链中 就可以访问 由于网站图片都上传在了腾讯云COS,微信小程序端不显示网站图片 原因: 腾讯云COS启用 ...
- 微信小程序网络请求 - 设置合法域名
微信小程序设置网络请求 官方文档 为什么要设置合法域名呢 ? 每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信.包括普通 HTTPS 请求(wx.request).上传文件(w ...
最新文章
- 在CentOS上搭建PHP服务器环境
- zookeeper分布式锁代码实例
- asp.net中获得客户端的IP地址
- nginx 80端口重定向到443端口
- 【软件工程】--软工文档总结
- Silverlight的诸多效果（小鸟飞，白云走，气球飘，图片展示）附源码
- 微博机器学习平台架构及在微博推荐中的应用
- JavaScript中的“ new”关键字是什么？
- python命名规范_Python 常用命名规则
- 兼容最好的设为首页加入收藏代码
- 【编程实践】一致性哈希(hash)算法实现
- android记账app开发全过程,android开发实战-记账本APP（一）
- 玩转大数据,城市规划不再“跟着感觉走”
- python可以ps吗_python-PS图片
- FPGA设计中，Vivado 调用IP核详细操作步骤
- java和python中函数式编程
- 【Kaggle项目实战记录】狗的品种识别
- 为什么没有法律保障研究生的权益？
- 计算机二级Java备考需要多久_计算机二级要准备多久 一个月来得及吗
- RocketMQ原理及解析