小程序的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, //将请求下来的数据给了绑定页面的数据
})
}
})
}