微信小程序开发实训记录（一）

学校的压迫下，三天开发一个小程序。作品做的不太好，但是对于基本界面的编写及数据交互算是有了一些了解，做一下记录。

一、 首页的实现

首页主要解决了轮播图、横向平分布局、以及页面跳转相关问题。

二、代码实现介绍

wxml部分

  <!--index.wxml-->
<view class="top" >  <swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">    <block wx:for="{{imgUrls}}"  >      <swiper-item>        <image src="{{item}}" class="slide-image" />      </swiper-item>    </block>  </swiper></view><view class="button_list">  <view class="AQ" >    <image src="../img/qa.png" bindtap="passQuery" data-index="1" ></image>  </view>  <view class="AQ">    <image src="../img/shi.png" bindtap="passQuery" data-index="2"></image>  </view>  <view class="AQ">    <image src="../img/ge.png" bindtap="passQuery" data-index="3"></image>  </view></view><view class="button_list">  <view class="AQ">    小听问答  </view>  <view class="AQ">    <label>诗情乐意</label>  </view>  <view class="AQ">    <label>藏乐阁</label>  </view></view><view style="margin-left:3px;font-size:35rpx">每日推荐</view><view class="music_list">  <view class="ml" >    <image src="http://47.100.192.102/f1.png" bindtap="tomusic" data-index="1" ></image>  </view>  <view class="ml">    <image src="http://47.100.192.102/f2.png" bindtap="tomusic" data-index="2"></image>  </view>  <view class="ml">    <image src="http://47.100.192.102/f3.png" bindtap="tomusic" data-index="3"></image>  </view></view><view class="music_list">  <view class="ml" >    <image src="http://47.100.192.102/f4.png" bindtap="tomusic" data-index="4" ></image>  </view>  <view class="ml">    <image src="http://47.100.192.102/f5.png" bindtap="tomusic" data-index="5"></image>  </view>  <view class="ml">    <image src="http://47.100.192.102/f6.png" bindtap="tomusic" data-index="6"></image>  </view></view>
<!--index.wxml-->

js部分，主要和data相关

//index.js//获取应用实例const app = getApp()
Page({  data: {     imgUrls: [      '../img/1.jpg',      '../img/2.jpg',      '../img/3.jpg',      '../img/4.jpg',      '../img/5.jpg',      '../img/6.jpg'    ],      indicatorDots: true,    autoplay: true,    interval: 5000,    duration: 1000  },
  passQuery: function (e) {
    // 传递的参数
    let query = e.currentTarget.dataset['index'];    if(query==1){      wx.navigateTo({        url: '../anwser/anwser',      })    }else if(query==2){      wx.navigateTo({        url: '../poem/poem',      })    }else{      wx.navigateTo({        url: '../lib/lib',      })    }
  },  tomusic:function(e){    // 全局定义    let query = e.currentTarget.dataset['index'];    app.data.id = query;    wx.navigateTo({      url: '../listen/listen',    })    
  }
})

wxss 部分

/**index.wxss**/

.top{    width: 100%;  height:400rpx; }.top image{  width: 100%;  height: 100%;}.button_list{  display: flex;  align-items: center;  width: 100%;  flex-direction: row;  padding-top: 5rpx;
}
.button_list image{    width: 120rpx;  height: 120rpx;  vertical-align:top;}
.AQ{  width: 120rpx;  height: 120rpx;  text-align: center;  flex:1;  font-size: 35rpx;}.music_list{  display: flex;  align-items: center;  width: 100%;  flex-direction: row;  margin-top: 10rpx;}.music_list image{    width: 90%;  height: 220rpx;  vertical-align:top;}.ml{  width: 90%;  height: 220rpx;  text-align: center;  flex:1;}
/**index.wxss**/

需要注意的点

首页实现中，下面的每日推荐涉及到跳转后传值。采用了全局变量的改变来实现这一点。