微信小程序之获取接口数据展示

上篇说到获取编辑框文本，没看过去看看。

本片介绍简单的接口数据获取，并且展示，采取模拟数据，拉取数据方式方法。文章最后附上DEMO

本篇暂未考虑美化问题，只看功能。如图：

一、简单介绍

1> wx.request 请求接口资源（微信小程序api中的发起请求部分）

2>swiper 实现轮播图的组件，一般使用到Banne上，这里先不介绍

3>wx:for 循环语句，将数据循环获取

二、详细说明

1、js请求函数代码（无参请求）

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this; //this在函数内部指向变化,所以需要将全局this指向保存到that中wx.request({url: 'URL', //需更换需请求数据的接口method: 'post',//请求方式 OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheaders: {'Content-Type': 'application/json'},success: function (res) {that.setData({//请求成功后在此刷新，res代表success函数的事件对，data是固定的，stories是是上面json数据中stories//这里模拟数据})},fail: function (err) { },//请求失败});

2、.wxml页面代码

<text>我是第三个页面</text>
<view><text>模拟请求数据：{{requst}}</text>
</view>
<view class='hotgoodcontainer'><view class='gooditem' wx:for="{{hotgoods}}" wx:for-index="idx" wx:for-item="good"><view class='imgview'><image class='productimg' src='{{good.pic_url}}'/><text>介绍：{{good.summary}}</text></view><view>产品名：{{good.name}}</view></view>
</view>

3、微信小程序通过api接口将json数据展现到小程序示例，以下为模拟数据

 motto: 'MiHome_Store',userInfo: {},indicatorDots: true,autoplay: true,interval: 3000,duration: 100,hotgoods: [{ //模拟接口拉取数据"name": "90分轻薄羽绒服","summary": "防钻绒工艺,保暖更锁温,备好深秋暖意","ext_tag": "http://static.home.mi.com/app/shop/img?id=shop_9d57f6e89d1f560b7bce31e0b85a7285.png&w=420&h=240&crop=a_0_120_1080_480&t=png","pic_url": "http://static.home.mi.com/app/shop/img?id=shop_48ebe9e693ade1766877e0f8adf425f7.png&w=420&h=240&crop=a_90_0_240_240"},{"name": "红米Note 3","summary": "金属机身,指纹解锁,4000mAh大电池","ext_tag": "http://static.home.mi.com/app/shop/img?id=shop_d65477ca8db6626da323554e132d7de9.png&w=420&h=240&crop=a_0_120_1080_480&t=png","pic_url": "http://static.home.mi.com/app/shop/img?id=shop_c2cf209c66a22818c7f5c269f6bbff12.jpeg&w=420&h=240&crop=a_90_0_240_240","url": "http://home.mi.com/shop/detail?gid=95"},{"name": "小米手机5","summary": "骁龙820处理器,4轴防抖相机","ext_tag": "http://static.home.mi.com/app/shop/img?id=shop_34699befd5c2de3a028eb987fea574e9.png&w=420&h=240&crop=a_0_120_1080_480&t=png","pic_url": "http://static.home.mi.com/app/shop/img?id=shop_8dec2f08e5dd9d08b440f77a36e39e16.png&w=420&h=240&crop=a_90_0_240_240"},]

4、js请求函数代码（有参请求）

/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this; //this在函数内部指向变化,所以需要将全局this指向保存到that中wx.request({url: 'URL', //需更换需求接口method: 'post',data: {"msg": this.data,//参数x: '',y: ''},headers: {'Content-Type': 'application/json'},success: function (res) {that.setData({ //请求成功后在此刷新//res代表success函数的事件对，data是固定的，stories是是上面json数据中stories//这里模拟数据})},fail: function (err) {}, //请求失败});}

这样最简单方式获取到接口数据

DEMO下载

查看更多相关API

-END

微信小程序之获取接口数据展示相关推荐

微信小程序Echars获取动态数据
一.背景下载了weixin小程序echars项目,可以正确显示图表,参考这个文档 https://blog.csdn.net/nmyangmo/article/details/79413030 但怎 ...
微信小程序链接后台接口，进行数据交互
微信小程序链接后台接口,进行数据交互新手学微信小程序,设计页面还可以,有没有让进行数据交互的时候就不知道怎么弄了,下面就记录一下我是怎么进行交互的 1.登陆微信小程序平台,进入首页,点击开发设置 2 ...
微信小程序缓存获取数据教程
微信小程序缓存获取数据教程每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSy ...
微信小程序批量获取input的输入值，监听输入框，数据同步
微信小程序批量获取input的输入值,监听输入框,数据同步在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事 ...
微信小程序直播状态接口如何获取
现如今,小程序直播非常的红火,越来越多的商家开通了微信小程序直播,但是在直播的过程中,偶尔会出现一些小问题,如禁播,异常状态等等,下面小编就来介绍一下微信小程序直播状态接口如何获取. 一.微信小程序直 ...
许嵩音乐智能问答系统微信小程序之获取数据及文本分类
许嵩音乐智能问答系统微信小程序之获取数据及文本分类项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值连接知识图谱数据获取 ...
微信小程序之获取后台动态数据表格布局display:table
微信小程序之获取后台动态数据表格布局display:table 猿来独往 2018-09-02 本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置. 一 ...
uniapp、hbuilderx做微信小程序，获取当前城市定位（省份国家街道等）
获取用户当前位置分为3步 1.获取位置用户请求权限 2.获取经纬度 3.经纬度转换为城市一.获取位置用户请求权限获取权限的目的主要是因为避免转换不了城市的报错(可能出现不提示"需要先请求 ...
微信小程序地图获取地点信息（打卡签到功能为例）-2020-7-26
目录微信小程序地图获取地点信息(打卡签到功能为例) 效果图前提步骤首先需要了解的代码部分配置性代码功能性代码 demo 下载微信小程序地图获取地点信息(打卡签到功能为例) 解决方案:利用 ...

微信小程序之获取接口数据展示

微信小程序之获取接口数据展示相关推荐

最新文章

热门文章