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

最新推荐文章于 2025-05-28 13:22:32 发布

原创最新推荐文章于 2025-05-28 13:22:32 发布 · 1w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序开发

本文分享了在紧迫的时间限制下，快速开发小程序首页的经验，包括轮播图、横向布局和平滑过渡效果的实现，以及如何通过代码进行页面跳转和数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、首页的实现

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

二、代码实现介绍

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**/