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

如果忘记了搭建json-server的过程，可看上一篇随笔

1. index.xml  代码

 <!--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>

2.index.wxss

 /**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%;
 }

3.index.js

//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();
  }
})

4. index.json (此json不是在项目里的index.json内写的，而是自己找个文件夹放置，然后json-sever index.json打开的，不明白可看上篇随笔)

 {
   "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"
     }
   ]
 }

效果图