小白之微信小程序第一次完成搭建本地服务与页面进行交互

<!--index.wxml-->
<swiper indicator-dots="{{indicatorDots}}" indicator-dots="true"
autoplay="{{autoplay}}" autoplay="true" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="">
<swiper-item>
<image src="{{item}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
<view class='pro-list'>
<view class='pro-item' wx:for="{{ proList}}" wx:key="" bindtap='toDetail' data-index="{{index}}">
<image class='pro-logo' src="{{item.img}}"></image>
<view class='pro-body'>
<view class='pro-title'>{{item.title}}</view>
<text class='pro-desc'>{{item.desc}}</text>
<view class='pro-footer'>
<image class="btn-detial" src="/images/btn_detail.png"></image>
<button class="btn-ask" open-type="contact">
<image class='btn-img' src="/images/btn_ask.png"/>
</button>
</view>
</view>
</view>
</view>

/**index.wxss**/
swiper{
width:100%;
height:340rpx;
}
.slide-image{
display: block;
width:100%;
height:100%;
}
.pro-list{
width: 100%;
height:auto;
}
.pro-item{
padding:30rpx;
overflow: hidden;
}
.pro-logo{
width:190rpx;
height:190rpx;
float: left;
}
.pro-body{
margin-left:213rpx;
}
.pro-title{
color:#212121;
font-size: 34rpx;
line-height: 1;
}
.pro-desc{
font-size: 24rpx;
color:#9a9a0a;
line-height:1.2;
}
.pro-footer{
overflow: hidden; }
.btn-detial{
float: left;
width:170rpx;
height:52rpx;
}
.btn-ask{
padding:0;
float:left;
width:224rpx;
height:52rpx;
margin-left:20rpx;
line-height: 1;
}
.btn-img{
width:100%;
height:100%;
}

//index.js
//获取应用实例
const app = getApp()
Page({
data: {
imgUrls: [
'/images/swiper01.jpg',
'/images/swiper02.jpg',
'/images/swiper03.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000,
proList: null,
},
//事件处理函数
toDetail: function (e) {
console.log(e);
var index = e.currentTarget.dataset.index;
console.log(index);
},
getProList:function(){
var self = this;
wx.request({
url: 'http://127.0.0.1:3000/data',
method: 'GET',
success: function (res) {
console.log(res);
self.setData({
proList: res.data,
})
}
});
},
onLoad: function () {
this.getProList();
}
})

{
"data": [
{
"img": "/images/pro_01.jpg",
"title": "test",
"desc": "这是个测试1"
},
{
"img": "/images/pro_02.jpg",
"title": "test",
"desc": "这是个测试2"
},
{
"img": "/images/pro_03.jpg",
"title": "test",
"desc": "这是个测试3"
},
{
"img": "/images/pro_01.jpg",
"title": "test",
"desc": "这是个测试4"
}
]
}