微信小程序之网络请求

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


<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  
  <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}}'>  
   
    <view class='view_img'>
      <image class='img_a' src="{{item.img}}" />    
    view>
    <view class='view_msg'>
      <view class='view_title'>{{item.title}}view>  
      <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,                                   //将请求下来的数据给了绑定页面的数据
        })
      }
    })
  }

你可能感兴趣的:(微信小程序)