微信小程序学习1--通过api接口将数据展现到小程序上_微信小程序通过api接口将json数据展现到小程序上-优快云博客

本文介绍如何使用微信小程序API加载图片资源，通过wx.request发起GET请求获取图片，并利用swiper组件实现轮播效果。同时展示了如何解析JSON数据并利用wx:for循环在页面中展示。

1.用到的知识点

<1> wx.request 请求接口资源（微信小程序api中的发起请求部分）
<2>swiper 实现轮播图的组件
<3>wx:for 循环语句

<4>微信小程序的基础知识

2.直接上代码

onLoad: function (options) {
    //this.goKrpano();
    var that=this
    wx.request({
      url: 'http://localhost/KpranoSystems/getImage',//这里填写你的接口路径
      method: 'GET',
        header: {
          'content-type': 'application/json'//默认值//这里写你接口返回的数据是什么类型，这里就体现了微信小程序的强大，直接给你解析数据，再也不用去寻找各种方法去解析json，xml等数据了
        },
//这里写你要请求的参数         data: {     x: '' ,     y: ''  },
        success: function (res) {//这里就是请求成功后，进行一些函数操作
          console.log(res.data);
          that.setData({
            items:res.data,
          })
        },
        fail: function (res) {
          console.log("......fail......");
        }
    })
  },

3.在小程序页面展示

</view>
<!--<web-view src="https://www.baidu.com"></web-view>-->
<!--<web-view src="http://192.168.1.3/KpranoSystems/returnIndex"></web-view>-->
<!--<view wx:for="{{items}}" wx:for-index="index" wx:for-item="item">
{{index+1}}{{item}}
</view>
-->
<view >
    <block wx:for="{{items}}">
     
          {{item}}
  
    </block>

</view>