微信小程序之网络请求

最新推荐文章于 2024-03-11 09:59:47 发布

QM_姚丹

最新推荐文章于 2024-03-11 09:59:47 发布

阅读量403

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_34475058/article/details/80218102

版权

微信小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

小程序的API已经把示例写的很清楚了，大家可以点击看一下小程序API链接发起网络请求–>wx.request
不过，这里我还是写一个示例吧，小心自己以后忘记
页面大家

<!--index.wxml-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <!-- <swiper>轮播图 -->
  <block wx:for="{{imgUrls}}" wx:key="imgUrls">
    <swiper-item>
      <image src="{{item}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>


<!--列表-->
<view class='view_list'>
   <view class="view_item" wx:for="{{listDatas}}" wx:key="listDatas" bindtap='toDetail' data-index='{{index}}'>  
   <!-- bindtap绑定的事件    data-index常常伴随list绑定的点击事件，为绑定的事件提供下标值 -->
    <view class='view_img'>
      <image class='img_a' src="{{item.img}}" />    <!--item是集合里面某一条目，img我们自己定义的，和js里面给定的值搭配-->
    </view>
    <view class='view_msg'>
      <view class='view_title'>{{item.title}}</view>  <!--item.title是listDatas指定的某一条目的title-->
      <text class='text_des'>{{item.desc}}</text>
    </view>
    <view class='view_btn'>
      <image class='btn_detail' src='/images/btn_look.png'></image>
      <button class='btn_again' open-type='contact'>联系客服</button>
    </view>
  </view>
</view>

js界面重点是listDatas，这个是界面绑定的数据，给他赋值
注意：测试时一定要注意勾选详情–>不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

//index.js
//获取应用实例
Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,
    autoplay: false,
    interval: 5000,
    duration: 1000,
    listDatas:null,                                                //页面的数据先设为空
  },
  // onload：页面刚进入的时加载的方法，setData也可以为页面设定相关的值
  onLoad: function(){ 
    this.setData({
      test:'01',
    }),
      this.getlistDatas();        //在页面刚加载时调用请求数据的方法
  },
  // toDetail:在wxml页面指定绑定的方法
  toDetail: function(e){
    console.log(e);
    var index = e.currentTarget.dataset.index;
    console.log(index);
  },
  getlistDatas:function(){            //请求数据
    var self=this;
    wx.request({                
      url: 'http://www.xzylogic.xyz/wx_Json_Img/bdy.json',      //请求的地址
      method:'GET',                                             //GET请求
      success: function (res) {                                  //请求成功方法
        console.log(res);                             
        self.setData({
           listDatas:res.data,                                   //将请求下来的数据给了绑定页面的数据，注意用冒号
        })
      }
    })
  }
})

主要这几行代码，但是测试时一定要注意勾选详情–>不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

 getlistDatas:function(){            //请求数据
    var self=this;
    wx.request({                
      url: 'http://www.xzylogic.xyz/wx_Json_Img/bdy.json',      //请求的地址
      method:'GET',                                             //GET请求
      success: function (res) {                                  //请求成功方法
        console.log(res);                             
        self.setData({
            :res.data,                                   //将请求下来的数据给了绑定页面的数据
        })
      }
    })
  }